web-dev-qa-db-fra.com

Trouver la direction du défilement dans la liste / vue de défilement native

Existe-t-il un moyen de connaître le sens de défilement des composants listview/scrollview de react-native?

Les composants iOS natifs semblent pouvoir le faire en calculant le décalage entre scrollViewWillBeginDragging et scrollViewDidScroll, mais il ne semble y avoir aucune liaison pour ceux-ci.

react-nativereact-native-listviewreact-native-scrollview
17
Secret

Vous pouvez utiliser l'événement onScroll d'un ScrollView et vérifier le contentOffset dans le rappel d'événement:

https://rnplay.org/apps/FltwOg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  ScrollView,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  offset: 0,
  onScroll: function(event) {
    var currentOffset = event.nativeEvent.contentOffset.y;
        var direction = currentOffset > this.offset ? 'down' : 'up';
    this.offset = currentOffset;
    console.log(direction);
  },
  render: function() {
    return (
      <View style={styles.container}>
        <ScrollView style={styles.scroller} onScroll={this.onScroll}>
          <Text>Scrollable content here</Text>
        </ScrollView>
      </View>
    )
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 50,
  },
  scroller: {
    height: 5000,
  },
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);
32
alexp

J'ai eu des problèmes avec la solution d'Alexp pour spécifier avec précision la direction lorsque la différence entre l'ancien et le nouveau décalage était très petite. Je les ai donc filtrés.

  _onScroll = event => {
    const currentOffset = event.nativeEvent.contentOffset.y;
    const dif = currentOffset - (this.offset || 0);

    if (Math.abs(dif) < 3) {
      console.log('unclear');
    } else if (dif < 0) {
      console.log('up');
    } else {
      console.log('down');
    }

    this.offset = currentOffset;
  };
12
Johannes Filter