51

各項目が水平方向のフラット リストです。width:300 私がやろうとしているのは、現在表示されている項目のインデックスを取得することだけです。

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

これを試しました：

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

そして、このようなもの：

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

しかし、何も正確ではありません。常に 1 つのインデックスを上げたり、1 つのインデックスを下げたりします。
フラットリストで正しい現在のインデックスを取得するにはどうすればよいですか?

たとえば、リストの 8 番目にあるリスト項目を取得しますが、インデックスは 9 または 10 になります。
ここに画像の説明を入力

4

6 に答える 6

83

UPD。onViewableItemsChanged を更新してはならないことを指摘してくれた @ ch271828n に感謝します

FlatList onViewableItemsChangedprop を使用して、必要なものを取得できます。

class Test extends React.Component {
  onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  }

  render () => {
    return (
      <FlatList
        onViewableItemsChanged={this.onViewableItemsChanged }
        viewabilityConfig={{
          itemVisiblePercentThreshold: 50
        }}
      />
    )
  }
}

viewabilityConfigビューアビリティ設定を使用して、必要なものを作成するのに役立ちます。コード例50では、アイテムが 50 パーセントを超えて表示されている場合に、アイテムが表示されていると見なされることを意味します。

構成構造はここにあります

于 2017-08-24T19:32:19.573 に答える