React Native FlatList Pagination 不起作用 - onEndReached 没有触发 [英] React Native FlatList Pagination not working - onEndReached doesn't fired

问题描述

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

I am using react-native FlatList component to list of items Pagination is not happening as expected , as per documentation onEndReached has to get fired when end of page is reached, currently I tried changing the values for onEndReachedThreshold ( tried 0.1, 1.0, 0.5, 0.01 ), am setting refreshing flag as well. Note: I am using ReactNative 0.48.4 So here my code

<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>

我已经尝试了所有可能的解决方案，作为对 github 问题的回应

I have already tried all possible solutions as give in responses for github issues

这里有什么帮助吗?

推荐答案

您在项目中使用 NativeBase 并且 Flatlist 位于内容上，它们是冲突的.要解决此问题，您需要删除 Content

You use NativeBase in your project and the Flatlist is on Content they are conflict. To solve this problem you need to remove Content

这篇关于React Native FlatList Pagination 不起作用 - onEndReached 没有触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！