1. ホーム
  2. ios

[解決済み] React NativeでScrollViewの現在のスクロール位置を取得する

2022-05-27 06:22:35

質問

の現在のスクロール位置、または現在のページを取得することは可能ですか? <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>

どのように解決するのですか?

試してみてください。

<ScrollView onScroll={this.handleScroll} />

そして

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

別の文脈で、ページネーションインジケータも実装したいとしましょう。 インジケータを実装したい場合、さらにこのようにしたいと思うでしょう。

<ScrollView
     onScroll={Animated.event([{ nativeEvent: { contentOffset: { x: 
     scrollX } } }], {listener: (event) => handleScroll(event)})}
     scrollEventThrottle={16}
>
   ...some content
</ScrollView>

scrollX はページネーションに使用するアニメーションの値で、 handleScroll 関数は次のような形式を取ります。

  const handleScroll = (event) => {
    const positionX = event.nativeEvent.contentOffset.x;
    const positionY = event.nativeEvent.contentOffset.y;
  };