web-dev-qa-db-ja.com

React-Native：pagingEnabledを使用するときにFlatListで現在のページを取得する

次のようなFlastListがあります。

<FlatList
     pagingEnabled={true}
     horizontal={true}
     showsHorizontalScrollIndicator={false}
     data={[ {key:"A"}, {key:"B"} ]}
     renderItem={ ({item, index}) => <MyComponent /> }
 />

コンポーネントの幅を設定して、一度に1ページだけが画面に表示されるようにします。現在のページ（または、現在表示されているコンポーネント）を確認するにはどうすればよいですか？

react-nativereact-native-flatlist
17
mathew

あなたのようなVirtualizedListでページングを有効にしてコンポーネントを構築しました。 ScrollViewのonMomentumScrollEndハンドラーを使用して、contentOffsetに基づいて現在のページを決定しました。 onMomentumScrollEndハンドラーは、ユーザーがページ間をスワイプした後にスクロールアニメーションが停止したときに呼び出されます。標準のonScrollイベントのようなイベントオブジェクトがあります。 nativeEvent.contentOffset.xを使用して、どのページにいるかを次のように判断できます。

class Example extends React.Component {

  onScrollEnd(e) {
    let contentOffset = e.nativeEvent.contentOffset;
    let viewSize = e.nativeEvent.layoutMeasurement;

    // Divide the horizontal offset by the width of the view to see which page is visible
    let pageNum = Math.floor(contentOffset.x / viewSize.width);
    console.log('scrolled to page ', pageNum);
  }

  render() {
    return 
      <VirtualizedList 
        horizontal
        pagingEnabled
        onMomentumScrollEnd={this.onScrollEnd} />
  }
}

スペースを節約するために、他のVirtualizedList小道具を残しました。 FlatListコンポーネントはVirtualizedList上に構築されているため、この例はうまく機能します。

40
A. Goodale