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

Question

I work on react native (react 16.2.0 , react native 0.54)

I display a large list of items with flatlist . We can take the example of a contact list with 1000 employees.

The flatlist is working good, no bug, but i cannot press the cursor of the scrollbar to navigate as in native Android or in html page.

Steps to Reproduce

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

Expected Behavior

So i have 1000 items in this.state.data that i need to display.

I initaly display 15 items ( initialNumToRender={15} ) for faster performance, so if i want to see the 600th item i need to scroll down like 40 times, not very user friendly. I cannot press the cursor of the scrollbar like an html page to navigate very fast to the end of the list.

Question

Did you have any idea how to fix this or to navigate fastly without scrolling down dozen times ?

Answer 1

This is not a typical behaviour on iOS. The scroll indicator is usually not tappable.

FlatList has a prop called initialScrollIndex that you could use if you want the list to load at a particular item. Alternatively, if you don't want to do it on start. FlatList also has the methods scrollToIndex and scrollToItem which allow you to programatically move to a specific index or item. https://facebook.github.io/react-native/docs/flatlist.html