react-native - 如何在 RN 中将反向 FlatList 的加载指示器保持在顶部

Question

当 FlatList 倒置时，加载指示器会在底部，如何保持在顶部？

标签： react-nativereact-native-flatlist

Answer 1

我最终通过将 FlatList 包装在 ScrollView 中来解决问题，并将 refreshControl 留给 ScrollView。

const { fetchingMore, onFetchMore } = this.props;
return <ScrollView
  contentContainerStyle={{
    flexDirection: 'row',
    alignSelf: 'flex-end',
    flexGrow: 1
  }}
  refreshControl={<RefreshControl refreshing={fetchingMore} onRefresh={onFetchMore} />}
>
  <FlatList
    inverted
    style={styles.list}
    data={messages}
    keyExtractor={this.extractItemKey}
    renderItem={this.renderItem}
  />
</ScrollView>

请注意，flexGrow: 1在scrollView中有样式很重要，否则FlatList在未满时会在scrollview的顶部流动。