RNフラットリストで現在表示されているインデックスを取得する方法

Question

各アイテムがwidth:300 である水平フラットリストがあります。表示しようとしているアイテムのインデックスを取得するだけです。

handleScroll(event) { 
    let index = Math.ceil(
     event.nativeEvent.contentOffset.x/300 
    ); 

そして、このような何か：この試しました

<FlatList 
      onScroll={(e) => this.handleScroll(e)} 
      horizontal={true} 
      data={this.state.data} 
      renderItem... 

handleScroll(event) { 
    let contentOffset = event.nativeEvent.contentOffset; 
    let index = Math.floor(contentOffset.x/300); 

を何も、私はいつも一つの指標アップまたは1つのインデックスを降り正確ではありません。
私は間違って何をやっていますか、フラットリストで正しい現在のインデックスを取得する方法はありますか？

たとえば私は、リスト内の8番目である項目をリストしてもらうが、私はあなたが欲しいものを得るためにFlatList onViewableItemsChanged小道具を使用することができ、インデックス9または10

Answer 1

を取得します。

<FlatList 
    onViewableItemsChanged={({ viewableItems, changed }) => { 
    console.log("Visible items are", viewableItems); 
    console.log("Changed in this iteration", changed); 
    }} 
    viewabilityConfig={{ 
    itemVisiblePercentThreshold: 50 
    }} 
/> 

viewabilityConfigあなたは視認性の設定で好きな作るためにあなたを助けることができます。コード例50では、アイテムが50％以上表示されていると見えるとみなされます。

コンフィグstuctureはhere

Answer 2

を見つけることができる私は、ページ番号を取得する値のラウンドを取得します

let yOffset = event.nativeEvent.contentOffset.y 
let contentHeight = event.nativeEvent.contentSize.height 
let value = yOffset/contentHeight 

として書きました。