react-native - Flatlist可见位置

Question

我正在尝试渲染一个弯曲的垂直列表，如这个 iOS 组件:https://github.com/makotokw/CocoaWZYCircularTableView

该组件(用 Obj-c 编写)在布局可见单元格时迭代它们，并使用 asin 设置框架(即缩进)。

我知道在 React Native 中我可以在 renderItem 回调中设置 leftMargin 样式，但我不知道如何获取项目的屏幕索引 - 我所拥有的只是源数据的索引。而且，在这一点上，我认为我无法获得绝对位置。

有什么想法吗？

Answer 1

您正在寻找的功能是onViewableItemsChanged。您可以将其与 viewabilityConfig 一起使用，它为我们提供了最小ViewTime、viewAreaCoveragePercentThreshold、waitForInteraction可以相应设置

const VIEWABILITY_CONFIG = {
     minimumViewTime: 3000,
      viewAreaCoveragePercentThreshold: 100,
    waitForInteraction: true,
};


 _onViewableItemsChanged = (info: {
  changed: Array<{
    key: string,
    isViewable: boolean,
    item: any,
    index: ?number,
    section?: any,
     }>
    }
 ){
  //here you can have the index which is visible to you
  }

<FlatList
  renderItem={this.renderItem}
  data={this.state.data}
  onViewableItemsChanged={this._onViewableItemsChanged}
  viewabilityConfig={VIEWABILITY_CONFIG}
 />