React Native FlatList inside ScrollView onEndReached 从未调用过答案

【问题标题】：React Native FlatList inside ScrollView onEndReached never calledReact Native FlatList inside ScrollView onEndReached 从未调用过
【发布时间】：2018-07-13 07:33:22
【问题描述】：

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

平面列表：

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

如何解决？

【问题讨论】：

你用的是 VirtualizedList 还是 FlatList ??
虚拟化列表 ..
请添加此代码以调试您的代码；) onEndReached={({ distanceFromEnd }) => { console.log('on end reached ', distanceFromEnd); }}
它从来没有调用过onEndReached..所以没有注销
@FaiChou 只是一件事，根本不建议在滚动视图中使用平面列表。我的猜测是这就是问题所在。

标签： react-native react-native-flatlist

【解决方案1】：

其实你不需要使用Content或ScrollView，因为FlatList既有ListFooterComponent又有ListHeaderComponent

如果您确实需要在 ScrollView 中使用 FlatList，则将样式和内容 contentContainerStyle 添加到您的 ScrollView 或者如果您使用 native-base，则在 Content 中添加

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

那么如果你想在 FlatList 循环之外使用 header 组件。然后在 Flatlist 中使用ListHeaderComponent={() => <SomeHeader />。

【讨论】：