在 ScrollView onEndReached 内反应 Native FlatList 从未调用过 [英] React Native FlatList inside ScrollView onEndReached never called

问题描述

我的容器是一个滚动视图，里面是一个平面列表，它从服务器加载数据.

My container is a scrollview and inside it is a flatlist, which load data from server.

平面列表:

<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 也从未调用过.

The problem is the handleLoadMore never called and the onMomentumScrollBegin also never called.

如何解决这个问题?

推荐答案

实际上你不需要使用 Content 或 ScrollView 因为 FlatList 有两个 ListFooterComponent 和 ListHeaderComponent

Actually you don't need to use Content or ScrollView as FlatList has both ListFooterComponent and ListHeaderComponent

如果你真的需要在 ScrollView 中使用 FlatList，然后将样式和内容 contentContainerStyle 添加到你的 ScrollView 或者如果你使用 native-base，在 中内容

In case you really need to use FlatList inside ScrollView, then add style and content contentContainerStyle to your ScrollView or if you use native-base, inside the Content

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

然后，如果您想在 FlatList 循环之外使用标题组件.然后使用 ListHeaderComponent={() => 在 Flatlist 中.

Then if you want to use header component out of FlatList loop. Then use ListHeaderComponent={() => <SomeHeader /> inside Flatlist.

这篇关于在 ScrollView onEndReached 内反应 Native FlatList 从未调用过的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！