在react-native listview / scrollview中找出滚动方向

秘密

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

机iOS成分似乎能够通过计算来做到这一点从偏移scrollViewWillBeginDraggingscrollViewDidScroll,但似乎这些不绑定。

阿勒克斯

您可以使用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);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native:如何禁用ListView中的滚动?

来自分类Dev

设置React Native ListView的初始滚动位置

来自分类Dev

如何使用React Native iOS将ListView放入ScrollView中?

来自分类Dev

ListView始终在react-native中滚动回到顶部

来自分类Dev

如何在React Native中滚动到ListView的顶部

来自分类Dev

ListView始终在react-native中滚动回到顶部

来自分类Dev

在React Native中从Web服务填充ListView

来自分类Dev

ListView行未在React Native中呈现

来自分类Dev

在React Native中删除ListView项目

来自分类Dev

ScrollView无法在React Native中滚动

来自分类Dev

HighLight / ScrollTo-ListView,React-Native上的ScrollView

来自分类Dev

React Native Listview留下空间

来自分类Dev

React-Native ListView键

来自分类Dev

react-native ListView换行

来自分类Dev

React Native:更新ListView问题

来自分类Dev

React Native:如何专注于ListView?

来自分类Dev

无法从MobX存储中的React Native ListView中呈现行

来自分类Dev

React Native-ListView行中的绑定事件

来自分类Dev

React-Native:在ListView中显示JSON数据

来自分类Dev

React Native:在ListView中的行之间设置空间

来自分类Dev

在React Native中枚举ListView时遇到麻烦

来自分类Dev

在 React Native 的 ListView 中显示图像和文本

来自分类Dev

React Native教程中的ListView无法滚动到底部(Android)

来自分类常见问题

获取React Native中ScrollView的当前滚动位置

来自分类Dev

ScrollView在React Native中不以小视图高度滚动

来自分类Dev

如何防止在 React-Native ScrollView 中滚动多个元素?

来自分类Dev

React Native Scrollview 与 flexGrow 不滚动

来自分类Dev

React Native的ListView.DataSource循环数据

来自分类Dev

React Native ListView get visible rows

Related 相关文章

热门标签

归档