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>

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

的回复

这里有任何帮助吗？

Answer 1

您在项目中使用NativeBase，而Flatlist在内容上是冲突的。要解决此问题，您需要删除内容

Answer 2

我发生了同样的事情，您需要添加contentContainerStyle = {flex：1}

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

Answer 3

将extraData prop传递给FlatList extraData = {this.state}检查docs以获取更多信息。

Answer 4

onEndReachedThreshold={0.5}     remove this line

React Native FlatList Pagination无效 - onEndReached没有被触发

4 个答案: