web-dev-qa-db-ja.com

フラットリストの問題のonEndReached

フラットリストをビューで囲んでいる場合、囲んでいるビューを削除すると、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のような値を取ります。それは何を示していますか？反応ネイティブ0.47.2を使用しています

react-nativereact-native-flatlist
8
subha

それは囲み<Content> 鬼ごっこ。反応ネイティブタグをネイティブベースタグに埋め込むと、このような問題が発生することがあります。 contentタグとcontainerタグをViewタグに置き換えましたが、正常に機能します。

11
subha

反応ネイティブ0.50.3で同じ問題があります

onEndReachedを使用する場合は、<Flatlist>を<ScrollView>で使用しないでください。フラットリストで高さが見つからないためです。

代わりに<View>を使用してください

14
person-m

私はそれを次のように使用します：

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

<FlatList
    onEndReached={this.handleMore}
/>
1
blacksun

RN 0.52でも同じ問題があります

Flatlistが高さを見つけられないため、このように見えます。したがって、彼はリストの終わりを見つけることができません。

Flex = 1のビューでフラットリストをラップして修正する

<View style={{flex: 1}} > <Flatlist /> <View>
1
Kien Nguyen Ngoc