React Native 嵌套的 ListView 在加载时多次触发 onEndReached

React Native nested ListView triggers onEndReached multiple times on loading

提问人:Xordion Wu 提问时间:2/23/2018 更新时间:7/19/2018 访问量:1607

问:

代码如下:

<ScrollView>
          { tree.myPoiComments.CommentInfo && tree.myPoiComments.CommentInfo.length>0 &&
          <FlatList
            data={tree.myPoiComments.CommentInfo}
            keyExtractor = {(item, index) => item.CommentId}
            ListHeaderComponent = {() => <View>
                      <Text style={styles.listHeader}>My Comments</Text>
                      </View>}
            renderItem= {({item}) => <CommentItem comment={item} owner={1} />}
          />
          }
          { tree.poiComments.CommentInfo && tree.poiComments.CommentInfo.length>0 &&
          <FlatList
            data={tree.poiComments.CommentInfo}
            keyExtractor = {(item, index) => item.CommentId}
            onEndReachedThreshold={1}
            onEndReached={(info) => {
            alert(JSON.stringify(info));
            } }
            extraData = {this.state}
            bounces={false}
            ListHeaderComponent = {() => <View>
                      <Text style={styles.listHeader}>People's Comments</Text>
                      </View>}
            renderItem= {({item}) => <CommentItem comment={item} owner={0} />}
          />
          }
        </ScrollView>

我已经浏览了 react native 的 github 中的问题列表。当包装了 ScrollView 时,onEndReached 将无法正常工作。 我尝试了我找到的一切,但没有一个奏效。

我只需要显示数据的 FlatList。两个列表分别滚动不是我想要的。这就是我需要 ScrollView 的原因。嵌套结构似乎是不可避免的。 有没有办法?

列表视图 反应原生 嵌套列表 react-native-flatlist

评论

2赞 Alireza Akbari 5/30/2018
我有同样的问题,我认为这是因为我们在 ScrollView 中使用了 Flatlist

答:

-1赞 Sahil Patel 7/19/2018 #1

这就是我的平面列表的样子,它工作正常。

https://github.com/facebook/react-native/issues/16067

    <FlatList
        onEndReachedThreshold={ 0.5 }
        onEndReached={ () => this.onEndReached() }
        refreshing= { false }
        onRefresh={ ()=> {
            this.refetchData()
        } }
        data={this.state.data}
        renderItem={({ item }) => <Item  id={item.key} />} />