加载时调用 FlatList onEndReached (React Native)答案

【问题标题】：FlatList onEndReached called On Load (React Native)加载时调用 FlatList onEndReached (React Native)
【发布时间】：2019-06-28 11:17:25
【问题描述】：

当我在FlatList 中使用onEndReached 函数时，它会被自动调用。

以下是本期的链接。

Link

是否有可用的解决方案或 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>

【问题讨论】：

如果你能发布sn-p你到目前为止尝试了什么，你通过了哪些道具等等......和
@TrinadhKoya 请检查我更新的问题。 :)
移除onScroll
并在 this.loadMore() 周围添加大括号 {}
Gokul 还是不行。

标签： react-native react-native-ios react-native-flatlist

【解决方案1】：

试试这个，

onEndReachedThreshold={0.5}
onEndReached={({ distanceFromEnd }) => {
if(distanceFromEnd >= 0) {
     //Call pagination function
}
}}

【讨论】：

不起作用。 onEndReached 函数内部的任何内容都会被调用组件的 onLoad。
完美解决方案令人惊叹！

【解决方案2】：

有时事情并没有像他们应该的那样工作，归根结底，它不是本地代码，组件的顺序或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函数

【讨论】：

【解决方案3】：

非常小心地处理这个函数，

  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}
     />

【讨论】：