在从未调用过的ScrollView onEndReached内部反应本机FlatList

时间:2018-07-13 07:33:22

标签: react-native react-native-flatlist

我的容器是一个滚动视图,而它的内部是一个平面列表,该列表从服务器加载数据。

单位列表:

<VirtualizedList
  ListEmptyComponent={<NoData />}
  data={data}
  getItem={(items, index) => items.get(index)}
  getItemCount={(items) => items.size}
  keyExtractor={(item, index) => String(index)}
  renderItem={this._renderItem}
  refreshControl={
     <RefreshControl
       refreshing={loading}
       onRefresh={this._onRefresh.bind(this)}
     />
  }
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={0.1}
  onMomentumScrollBegin={() => {
    Log('onMomentumScrollBegin fired!')
    this.onEndReachedCalledDuringMomentum = false;
  }}
/>

handleLoadMore是:

handleLoadMore = () => {
  Log('handleLoadMore fired!');
  if (!this.onEndReachedCalledDuringMomentum) {
    // fetch data..
    this.onEndReachedCalledDuringMomentum = true;
  }
}

问题在于handleLoadMore从未被调用,onMomentumScrollBegin也从未被调用。

如何解决这个问题?

1 个答案:

答案 0 :(得分:1)

实际上,您不需要使用ContentScrollView,因为FlatList同时具有ListFooterComponentListHeaderComponent

如果您确实需要在ScrollView内使用FlatList,则将样式和内容contentContainerStyle添加到ScrollView中,或者如果您使用本机库,请在Content

<ScrollView
  ...
  style={{flex: 1}}
  contentContainerStyle={{flex: 1}}
  ...
/>

然后,如果您想在FlatList循环之外使用头组件。然后在Flatlist中使用ListHeaderComponent={() => <SomeHeader />