javascript - 如何获取 RN 平面列表中当前可见的索引

Question

我有一个水平平面列表，其中每个项目的宽度为宽度: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);

但没有什么是准确的，我总是向上一个索引或向下一个索引。
我做错了什么以及如何在平面列表中获取正确的当前索引？

例如，我列出列表中第 8 位的项目，但得到索引 9 或 10。

Answer 1

UPD。感谢 @ch271828n 指出 onViewableItemsChanged 不应更新

您可以使用 FlatList onViewableItemsChanged 属性来获取您想要的内容。

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%，则该项目被视为可见。

配置结构可见here