react-native - reactnative - flatlist - 使用滚动条滚动

Question

我致力于 React Native(React 16.2.0，React Native 0.54)

我使用 flatlist 显示大量项目。我们可以以拥有 1000 名员工的联系人列表为例。

平面列表运行良好，没有错误，但我无法像在 native Android 或 html 页面中那样按滚动条的光标进行导航。

重现步骤

 <FlatList
  ref="listRef"
  data={this.state.data}
  keyExtractor={(item, index) => item.name.toString()}
  removeClippedSubviews={true}
  extraData={{ refreshListIteration: this.state.refreshListIteration }}
  renderItem={({ item, index }) => this.renderListItem(item, index)}
  initialNumToRender={15}
  ItemSeparatorComponent={this.renderSeparator}
  ListHeaderComponent={this.renderOptionBar}
  ListFooterComponent={this.renderFooter}
  onEndThreshold={5}
/>

预期行为

所以我在 this.state.data 中有 1000 个项目需要显示。

我最初显示 15 个项目 (initialNumToRender={15}) 以获得更快的性能，所以如果我想看到第 600 个项目我需要向下滚动大约 40 次，这对用户来说不是很友好。 我无法像 html 页面那样按下滚动条的光标来快速导航到列表的末尾。

问题

您是否知道如何解决此问题或如何在不向下滚动数十次的情况下快速导航？

Answer 1

这不是 iOS 上的典型行为。滚动指示器通常不可点击。

FlatList 有一个名为 initialScrollIndex 的 Prop ，如果您希望列表加载到特定项目，您可以使用它。 或者，如果您不想一开始就这样做。 FlatList 还有 scrollToIndex 和 scrollToItem 方法，它们允许您以编程方式移动到特定索引或项目。 https://facebook.github.io/react-native/docs/flatlist.html