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

非常仔细地处理此功能，

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

Answer 3

有时事情不会像他们应该的那样工作，归根结底不是本机代码在哪里，因此可能是您的组件的顺序或 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 函数

FlatList onEndReached称为载入（React Native）

3 个答案: