FlatList onEndReached вызывается при загрузке (React Native)

Когда я использую функцию onEndReached в FlatList, она вызывается автоматически.

Ниже ссылка на эту тему.

Ссылка

Есть ли для него решение или какая-либо альтернатива в iOS?

Отредактировано:

Ниже приведен код, который я пробовал, но, похоже, он не работает.

constructor(props){
        super(props);
        this.state = {
            flatListReady:false
        }
    }

    loadMore(){
        if(!this.state.flatListReady){
            return null;
        }
        else{
            alert("End Reached")
        }
    }

    _scrolled(){
        this.setState({flatListReady:true});
    }

    render() {
        return (
            <Layout style={{ flex: 1 }}>

                <FlatList
                    data={listData}
                    renderItem={({item}) => this._renderItem(item)}
                    keyExtractor={(item, index) => item.key}
                    onEndReached={() => this.loadMore()}
                    onEndReachedThreshold={0.5}
                    onScroll={() => this._scrolled()}
                />

            </Layout>

react-native react-native-ios react-native-flatlist
person Shubham Bisht    schedule 28.06.2019    source источник
comment
Было бы здорово, если бы вы могли опубликовать фрагмент того, что вы пробовали до сих пор, какие реквизиты вы передали и т. д.... и   -  person Trinadh Koya    schedule 28.06.2019
comment
@TrinadhKoya, пожалуйста, проверьте мой обновленный вопрос. :)   -  person Shubham Bisht    schedule 28.06.2019
comment
удалить onScroll   -  person Gokul Kulkarni    schedule 28.06.2019
comment
И добавьте фигурные скобки {} вокруг this.loadMore().   -  person Gokul Kulkarni    schedule 28.06.2019
comment
Гокул, это все еще не работает.   -  person Shubham Bisht    schedule 28.06.2019
comment
renderItem={({item}) =› this._renderItem(item)} в renderItem={this._renderItem} и затем уничтожить внутри renderItem   -  person Gokul Kulkarni    schedule 28.06.2019
comment
все равно не работает :(   -  person Shubham Bisht    schedule 28.06.2019
comment
Является ли макет представлением или прокруткой?   -  person Trinadh Koya    schedule 29.06.2019
comment
@TrinadhKoya это вид   -  person Shubham Bisht    schedule 29.06.2019
comment
проверьте мой ответ, упомянутый ниже.   -  person Trinadh Koya    schedule 29.06.2019
comment
@TrinadhKoya onEndReached все еще вызывается onLoad   -  person Shubham Bisht    schedule 29.06.2019

Ответы (3)


arrow_upward
7
arrow_downward

Попробуй это,

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
     //Call pagination function
}
}}
person Gokul Kulkarni    schedule 28.06.2019
comment
Не работает. Все, что находится внутри функции onEndReached, вызывается при загрузке компонента. - person Shubham Bisht; 28.06.2019
comment
Идеальное решение удивительно! - person steve moretz; 14.12.2020

arrow_upward
0
arrow_downward

Иногда что-то работает не так, как предполагалось, в конце концов, это не нативный код, где может быть порядок ваших компонентов или тот факт, что Flatlist инкапсулирован в компонент, который не предназначен для этого, или есть некоторое свойство, которое должно быть передано самому компоненту Flatlist, чтобы правильно активировать обратный вызов onEndReached.

Я сам столкнулся с этим, и я не знал, что делать, чтобы заставить его работать правильно.

Красивый обходной путь основан на том факте, что Flatlist наследует ScorllView свойства. поэтому вы можете использовать свойство onScroll, чтобы определить, достигнут ли конец или нет.

<FlatList
    data={this.props.dashboard.toPreviewComplaints}
    onScroll={({nativeEvent})=>{
        //console.log(nativeEvent);
        if(!this.scrollToEndNotified && this.isCloseToBottom(nativeEvent)){
             this.scrollToEndNotified = true;
             this.loadMoreData();
        }
    }}
/>

this.scrollToEndNotified используется как флаг, чтобы не злоупотреблять вызовом конечной точки loadMore.

isCloseToBottom({layoutMeasurement, contentOffset, contentSize}){
    return layoutMeasurement.height + contentOffset.y >= contentSize.height - 100;
}

Поэтому всякий раз, когда вызов isCloseToBottom завершается успешно, это означает, что вы достигли конца списка, поэтому вы можете вызвать функцию loadMoreData.

person Abdurhman An-naggar    schedule 07.05.2021

arrow_upward
-2
arrow_downward

обращайтесь с этой функцией очень осторожно,

  endReached=()=>{
          //take care of ES6 Fat arrow function and trigger your conditions properly with current state and new state data or current state with new Props.
    Based on those conditions only, you need to trigger the other API call

    }

<FlatList data={this.state.data}
     extraData={this.state.load}
     renderItem={this.renderCard}
     keyExtractor={item => item.fundRequestId}
     onEndReached={this.endReached}
     onEndReachedThreshold={.7}
     ListFooterComponent={this.renderFooter}
     />
person Trinadh Koya    schedule 29.06.2019