如何在 RN 平面列表中获取当前可见的索引 [英] How to get currently visible index in RN flat list

问题描述

我有一个水平平面列表，其中每个项目都是 width:300我要做的就是获取当前可见项目的索引.

I have a horizontal flat list where each item is width:300 All I am trying to do is to get index of currently visible item.

<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.

but nothing is accurate I always get one index up or one index down.
What am I doing wrong and how to get correct current index in flat list?

For example I get to list item that is 8th in a list but I get index 9 or 10.

推荐答案

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

UPD. thanks to @ch271828n for pointing that onViewableItemsChanged shouldn`t be updated

你可以使用 FlatList onViewableItemsChanged 道具来获得你想要的.

You can use FlatList onViewableItemsChanged prop to get what you want.

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

viewabilityConfig can help you to make whatever you want with viewability settings. In code example 50 means that item is considered visible if it is visible for more than 50 percents.

可以找到配置结构here

Config stucture can be found here

这篇关于如何在 RN 平面列表中获取当前可见的索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！