反应原生 - 平面列表 - 使用滚动条滚动

Question

我在反应原生(反应 16.2.0 ，反应原生 0.54(

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

平面列表运行良好，没有错误，但我无法像在本机 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}
/>

预期行为

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

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

问题

您是否知道如何解决此问题或快速导航而无需向下滚动十几次？

Answer 1

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

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