FlatList onEndReached 调用 On Load (React Native)

Question

当我在 中使用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>

Answer 1

尝试这个，

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

Answer 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函数