onEndReached в проблеме с Flatlist

Если я заключаю плоский список в представление, то мой 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


react-native react-native-flatlist
person subha    schedule 22.09.2017    source источник
comment
Я не думаю, что в вашем коде что-то действительно не так. Просто попробуйте обновить свою версию, поддерживающую реакцию, до последней и проверьте. В их реализации может быть ошибка, которая будет исправлена ​​в последних версиях.   -  person Ravi Raj    schedule 22.09.2017

Ответы (4)


arrow_upward
14
arrow_downward

У меня такая же проблема с react-native 0.50.3

<Flatlist> нельзя использовать в <ScrollView>, если вы хотите использовать onEndReached, потому что Flatlist не может найти высоту.

Вместо этого используйте <View>

person person-m    schedule 12.06.2018
comment
У меня есть экран статьи, я хочу загружать комментарии, когда пользователь достигает конца тела статьи. Как я могу справиться с этой проблемой? Прямо сейчас у меня есть плоский список внутри scrollview, который бесконечно запускает onEndReached. stackoverflow.com/questions/55748813/ - person gamingumar; 18.04.2019

arrow_upward
11
arrow_downward

Это произошло из-за закрывающего тега <Content>. Иногда такие проблемы возникают при встраивании тегов, поддерживающих реакцию, с тегами собственной разработки. Я заменил тег содержимого и контейнера тегами View, и теперь он работает нормально.

person subha    schedule 03.10.2017

arrow_upward
2
arrow_downward

У меня такая же проблема с RN 0.52

Это похоже, потому что Flatlist не может найти высоту. Значит, он не может найти конец списка.

Исправьте, обернув плоский список представлением с flex = 1

<View style={{flex: 1}} > <Flatlist /> <View>
person Kien Nguyen Ngoc    schedule 14.03.2018
comment
Полезный ... правильный ответ !! - person buddhiv; 18.03.2019

arrow_upward
1
arrow_downward

Я бы использовал это так:

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

<FlatList
    onEndReached={this.handleMore}
/>
person blacksun    schedule 22.09.2017