web-dev-qa-db-ja.com

反応ネイティブのリストビュー/スクロールビューでスクロール方向を見つける

反応ネイティブのリストビュー/スクロールビューコンポーネントのスクロール方向を調べる方法はありますか？

ネイティブiOSコンポーネントは、scrollViewWillBeginDraggingとscrollViewDidScrollからオフセットを計算することでそれができるように見えますが、これらのバインディングはないようです。

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

ScrollViewのonScrollイベントを使用して、イベントコールバックでcontentOffsetを確認できます。

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

古いオフセットと新しいオフセットの差が非常に小さい場合に、正確に方向を指定するalexpのソリューションに問題がありました。そのため、それらを除外しました。

  _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