在react-native listview/scrollview中找出滚动方向 [英] Finding out scroll direction in react-native listview/scrollview

问题描述

有没有办法找出react-native的listview/scrollview组件的滚动方向?

Is there a way to find out the scroll direction of react-native's listview/scrollview components?

本地iOS组件似乎可以通过计算scrollViewWillBeginDragging和scrollViewDidScroll的偏移量来做到这一点，但是似乎没有绑定.

Native iOS components seem to be able to do it by calculating the offset from scrollViewWillBeginDragging and scrollViewDidScroll, but there seems to be no bindings for these.

推荐答案

您可以使用ScrollView的onScroll事件并在事件回调中检查contentOffset:

You can use the onScroll event of a ScrollView and check the contentOffset in the event callback:

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);

这篇关于在react-native listview/scrollview中找出滚动方向的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！