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

ios IOS

十三村村蛋蛋

2020-03-12

是否可以获取当前滚动位置或<ScrollView>React Native中组件的当前页面？

所以像这样：

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

第999篇《获取React Native中ScrollView的当前滚动位置》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

DavaidTony宝儿 2020.03.12

至于页面，我正在研究一个更高阶的组件，该组件基本上使用上述方法来做到这一点。当您深入了解诸如初始布局和内容更改之类的细微之处时，实际上只需要一点时间。我不会声称自己做得“正确”，但是从某种意义上讲，我会考虑使用正确且谨慎地执行此操作的组件的正确答案。

请参阅：react-native-paged-scroll-view。希望反馈，即使是我做错了！

小哥梅Stafan 2020.03.12

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

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

斯丁JinJinHarry 2020.03.12

这样最终可以从视图中实时获取当前滚动位置。我正在做的是使用滚动事件监听器和scrollEventThrottle。然后，我将其作为处理我制作的滚动功能和更新道具的事件传递。

 export default class Anim extends React.Component {
          constructor(props) {
             super(props);
             this.state = {
               yPos: 0,
             };
           }

        handleScroll(event){
            this.setState({
              yPos : event.nativeEvent.contentOffset.y,
            })
        }

        render() {
            return (
          <ScrollView onScroll={this.handleScroll.bind(this)} scrollEventThrottle={16} />
    )
    }
    }

Itachi神乐 2020.03.12

要在滚动结束后按原始问题的要求获取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>

StafanJinJin 2020.03.12

布拉德·奥伊勒（Brad Oyler）的答案是正确的。但是您只会收到一个事件。如果需要不断更新滚动位置，则应设置scrollEventThrottleprop，如下所示：

<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只有一个。

路易Gil 2020.03.12

如果您只是想获取当前位置（例如，按下某个按钮时），而不是在用户滚动时跟踪它，那么调用onScroll侦听器将导致性能问题。当前，最简单地获取当前滚动位置的最有效方法是使用react-native-invoke程序包。确实有一个示例，但是该程序包还执行其他许多操作。

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

神乐小胖 2020.03.12

尝试。

<ScrollView onScroll={this.handleScroll} />

接着：

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

蛋蛋伽罗猿 2020.03.12

以上答案告诉了如何使用不同的API来获取位置，onScroll，onMomentumScrollEnd等; 如果您想知道页面索引，可以使用偏移值进行计算。

 <ScrollView 
    pagingEnabled={true}
    onMomentumScrollEnd={this._onMomentumScrollEnd}>
    {pages}
 </ScrollView> 

  _onMomentumScrollEnd = ({ nativeEvent }: any) => {
   // the current offset, {x: number, y: number} 
   const position = nativeEvent.contentOffset; 
   // page index 
   const index = Math.round(nativeEvent.contentOffset.x / PAGE_WIDTH);

   if (index !== this.state.currentIndex) {
     // onPageDidChanged
   }
 };