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

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

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

例如，我得到的列表项在列表中是第8个，但我得到的是索引9或10。

---

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

您可以使用FlatList

onViewableItemsChanged

prop来获取所需内容

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
        }}
      />
    )
  }
}

类测试扩展了React.Component{
onViewableItemsChanged=（{viewableItems，changed}）=>{
console.log（“可见项为”，可见项为）；
log（“本次迭代中已更改”，已更改）；
}
渲染（）=>{
返回(
)
}
}

viewabilityConfig

可以帮助您使用可视性设置制作任何想要的内容。在代码示例中，

50

表示如果项目的可见率超过50%，则认为该项目可见

可以在this.handleScroll=（event）=>{ 让yOffset=event.nativeEvent.contentOffset.y 让contentHeight=event.nativeEvent.contentSize.height let值=yOffset/contentHeight }

---

获取四舍五入值以计算页码/索引。

非常感谢投票最多的答案：）但是，当我尝试它时，它不起作用，导致一个错误，即不支持动态更改OnViewableItemsAnged。经过一番探索，我找到了解决办法。下面是可以无误运行的完整代码。关键的一点是，这两个配置应该作为类属性放置，而不是放在render（）函数中

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

  _viewabilityConfig = {
    itemVisiblePercentThreshold: 50
  };

  render() {
    return (
        <FlatList
          onViewableItemsChanged={this._onViewableItemsChanged}
          viewabilityConfig={this._viewabilityConfig}
          {...this.props}
        />
      </View>
    );
  }
}

类MyComponent扩展组件{
_onViewableItemsChanged=（{viewableItems，changed}）=>{
console.log（“可见项为”，可见项为）；
log（“本次迭代中已更改”，已更改）；
};
_可视性配置={
itemVisiblePercentThreshold:50
};
render（）{
返回(
);
}
}

与@fzyzcjy和@Roman的答案相关。在react中，16.8+可以使用

uscallback

处理

不支持动态更改OnViewableItemsAnged的
错误

function MyComponent(props) {
    const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
        console.log("Visible items are", viewableItems);
        console.log("Changed in this iteration", changed);
    }, []);

    const _viewabilityConfig = {
        itemVisiblePercentThreshold: 50
    }

    return <FlatList
            onViewableItemsChanged={_onViewableItemsChanged}
            viewabilityConfig={_viewabilityConfig}
            {...props}
        />;
}

功能MyComponent（道具）{
const_onViewableItemsChanged=useCallback（{viewableItems，changed}）=>{
console.log（“可见项为”，可见项为）；
log（“本次迭代中已更改”，已更改）；
}, []);
常数_可视性配置={
itemVisiblePercentThreshold:50
}
返回；
}
在您的情况下，我想您可能会忽略项目的
填充
或
边距
。
contentOffsetX
或
contentOffsetY
应为
firstViewableItemIndex
*（
itemWidth
+
项目填充或边距
）


与其他答案一样，
onViewableItemsChanged
将是更好的选择，以满足您的需求。我写了一篇关于如何使用它以及如何实现它的文章。
但我如何知道要使用哪些数据。因为项目是300 P宽，如果它在中间，我会看到20P左右项目，好吧，在这里我可以得到中间的一个。但是，如果有两个项目，如何选择下一个项目以获取其数据。此回调将以可见的形式返回所有三个项目。只有完全消失的项目才会标记为不可见。我用图像更新了问题。当我看到两件物品时，就像图片上一样。我只需要获取一个项目数据（可能是比另一个更可见的数据）。我更新了我的答案。我认为您现在可以尝试使用值，并得到您真正想要的结果。react native 0.54说：ExceptionsManager.js:65不变量冲突：不支持动态更改onViewableItemsChanged这一点放在哪里？好建议。在Android上，onViewableItemsChanged有时会将缓存项报告为可见项。因此，使用handleScroll或onMomentumScrollEnd进行建议的计算要好得多。我也遇到了这个问题，但我使用的是函数组件，而不是类。你有什么办法帮我吗？嗯，也许
useCallback
？我已经好几年没有写过React了…@Josiah你得到答案了吗？参加聚会有点晚了，但这里有一个链接指向Github上的问题，一位贡献者提出了功能组件的解决方案。希望它能帮助某些人_viewabilityConfig应该使用usemo创建，或者将它放在模块范围内的函数MyComponent（）之外。我可以问一下原因吗？最终使用它根据屏幕上的可视项目做了一些事情，谢谢
class MyComponent extends Component {  
  _onViewableItemsChanged = ({ viewableItems, changed }) => {
    console.log("Visible items are", viewableItems);
    console.log("Changed in this iteration", changed);
  };

  _viewabilityConfig = {
    itemVisiblePercentThreshold: 50
  };

  render() {
    return (
        <FlatList
          onViewableItemsChanged={this._onViewableItemsChanged}
          viewabilityConfig={this._viewabilityConfig}
          {...this.props}
        />
      </View>
    );
  }
}

function MyComponent(props) {
    const _onViewableItemsChanged = useCallback(({ viewableItems, changed }) => {
        console.log("Visible items are", viewableItems);
        console.log("Changed in this iteration", changed);
    }, []);

    const _viewabilityConfig = {
        itemVisiblePercentThreshold: 50
    }

    return <FlatList
            onViewableItemsChanged={_onViewableItemsChanged}
            viewabilityConfig={_viewabilityConfig}
            {...props}
        />;
}