React native：获取当前scrollview的滚动位置

是否有可能得到当前的滚动位置，或当前页面的<ScrollView>组件反应原生？

所以像这样：

 <ScrollView horizontal={true} pagingEnabled={true} onScrollAnimationEnd={() => { // get this scrollview's current page or x/y scroll position }}> this.state.data.map(function(e, i) { <ImageCt key={i}></ImageCt> }) </ScrollView> 

Answer 1

尝试。

 <ScrollView onScroll={this.handleScroll} /> 

接着：

 handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, 

Answer 2

Brad Oyler的回答是正确的。 但你只会收到一个事件。 如果你需要获得滚动位置的不断更新，你应该设置scrollEventThrottle ，如下所示：

 <ScrollView onScroll={this.handleScroll} scrollEventThrottle={16} > <Text> Be like water my friend … </Text> </ScrollView> 

而事件处理程序：

 handleScroll: function(event: Object) { console.log(event.nativeEvent.contentOffset.y); }, 

请注意，您可能遇到性能问题。 相应地调节油门。 16给你最新的更新。 0只有一个。

Answer 3

我相信contentOffset会给你一个包含左上滚动偏移量的对象：

http://facebook.github.io/react-native/docs/scrollview.html#contentoffset

Answer 4

这应该适用于Android和iOS（在Android上testing）：

 <ScrollView ref='myScrollView'> <Text>Blah</Text> </ScrollView> ... getOffset() { console.log(this.refs.myScrollView.scrollProperties.offset); } 

Answer 5

至于页面，我正在使用一个更高阶的组件，基本上使用上述方法来做到这一点。 实际上，只需要一点时间，即可了解初始布局和内容更改等细节。 我不会声称做了“正确的”，但从某种意义上说，我会考虑使用正确的答案来使用这个小心谨慎的组件。

请参阅： react-native-paged-scroll-view 。 会爱反馈，即使这是我所做的一切都是错的！

Answer 6

目前还不清楚究竟是什么作者想要得到的。 位置改变的事件或只是目前的位置？

如果你想听更改，那么接受的答案是正确的。

但是，如果您只想获得当前位置，则调用onScroll侦听器将会导致性能问题。 目前，获取当前滚动位置的最高性能方法是使用react-native-invoke包。 有一个确切的例子，但包做了多个其他的事情。

在这里阅读。 https://medium.com/@talkol/invoke-any-native-api-directly-from-pure-javascript-in-react-native-1fb6afcdf57d#.68ls1sopd

Answer 7

为了得到滚动结束后的X / Y原始问题要求，最简单的方法可能是这样的：

 <ScrollView horizontal={true} pagingEnabled={true} onMomentumScrollEnd={(event) => { // scroll animation ended console.log(e.nativeEvent.contentOffset.x); console.log(e.nativeEvent.contentOffset.y); }}> ...content </ScrollView>