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

预期行为

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

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

问题

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

Answer 1

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

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

reactnative - flatlist - 使用滚动条滚动

1 个答案: