React Native FlatList 分页不起作用 - onEndReached 未触发

Question

我正在使用 react-native FlatList 组件来列出项目分页没有按预期发生，根据文档，当到达页面末尾时必须触发 onEndReached，目前我尝试更改 onEndReachedThreshold 的值（尝试 0.1、1.0、0.5、0.01），我也在设置刷新标志。注意：我使用的是 ReactNative 0.48.4 所以这是我的代码

<Container style={{ marginTop: 22 }}>
      <Content
        style={{ flex: 1 }}
        contentContainerStyle={{ flexGrow: 1 }}
      >
        <View style={{ flex: 1 }}>
          <FlatList
            initialNumToRender={10}
            refreshing={this.state.refreshing}
            onEndReachedThreshold={0.5}
            onEndReached={({ distanceFromEnd }) => {
              console.log('on end reached ', distanceFromEnd);
            }}
            data={this.props.messages}
            renderItem={this.notificationContent.bind(this)}
            keyExtractor={(item) => item._id}
          />
        </View>
      </Content>
    </Container>

我已经尝试了所有可能的解决方案作为对

的回应

这里有什么帮助吗？

Answer 1

将 extraData 属性传递给 FlatList 作为 extraData = {this.state} 查看 docs 了解更多信息。

Answer 2

您在项目中使用了NativeBase，而Flatlist 位于Content 上，它们存在冲突。要解决此问题，您需要删除 Content

Answer 3

onEndReachedThreshold={0.5}     remove this line

Answer 4

同样的事情发生在我身上你需要添加 contentContainerStyle={flex:1}

<Content contentContainerStyle={{ flex: 1 }}>

React Native FlatList 分页不起作用 - onEndReached 未触发

React Native FlatList Pagination not working - onEndReached doesn't fired

react-native

react-native-flatlist