React Native 平面列表问题中的onEndReached

bogh5gae  于 2023-02-09  发布在  React
关注(0)|答案(4)|浏览(186)

如果我将平面列表封装在一个视图中,那么如果我移除封装视图,我的onEndReached触发器将无限地触发,而onEndReached根本不会触发。

render() {
    return (
        <Root>
            <Container>
                <Content>
                    <View>
                        {this.state.listView && (
                            <FlatList
                                data={this.state.variants}
                                keyExtractor={this._keyExtractor}
                                onEndReachedThreshold={0.5}
                                onEndReached={({ distanceFromEnd }) => {
                                    console.log(
                                        "on end reached ",
                                        distanceFromEnd
                                    );
                                    this.loadMore();
                                }}
                                numColumns={1}
                                renderItem={({ item, index }) => (
                                    <CatalogRow
                                        item={item}
                                        in_wishlist={this.state.in_wishlist}
                                        toggleWishlist={() =>
                                            this.toggleWishlist(item.title)
                                        }
                                        listView={this.state.listView}
                                    />
                                )}
                            />
                        )}
                    </View>
                </Content>
            </Container>
        </Root>
    );
}

我的distanceFromEnd在被触发时取值为0,960,1200,这表示什么?我使用的是react-native 0.47.2

5t7ly7z5

5t7ly7z51#

我对react-native 0.50.3也有同样的问题
如果要使用onEndReached,则不能在<ScrollView>中使用<Flatlist>,因为Flatlist找不到高度。
请改用<View>

wlzqhblo

wlzqhblo2#

这是因为<Content>标签的原因,有时候用native-base标签嵌入react-native标签会导致这样的问题,我用View标签替换了content和container标签,现在可以正常工作了。

7lrncoxx

7lrncoxx3#

我对RN 0.52也有同样的问题
那看起来像是因为平面列表找不到高度。所以他找不到列表的结尾。
通过使用flex=1的View Package 平面列表来修复

<View style={{flex: 1}} > <Flatlist /> <View>
zaq34kh6

zaq34kh64#

我会这样使用它:

handleMore = () => {
    // fetch more here
};

<FlatList
    onEndReached={this.handleMore}
/>

相关问题