无法在 React Native Flatlist 组件中运行 onEndReached答案

【问题标题】：Not able to run onEndReached in React Native Flatlist component无法在 React Native Flatlist 组件中运行 onEndReached
【发布时间】：2019-06-26 22:54:02
【问题描述】：

这是我的代码：

import React, { Component } from "react";
import { View, FlatList } from "react-native";
import { connect } from "react-redux";
import { newsFetch } from "../actions";
import NewsCard from "../components/NewsCard";

import Spinner from "../components/Spinner";

var self;
class NewsScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            pageNo: 1,
            refreshing: false,
        };
    }
    componentDidMount() {
        this.props.newsFetch();
        self = this;
    }
    renderNewsCard({item}) {
        // console.log(self.props.navigation);
        return(
            <NewsCard item={item} navigationProp={self.props.navigation} />
        );
    }

    loadMoreNews() {
        console.log("Loading more...");
    }

    renderNewsList() {
        if(this.props.loading) { 
            return(
                <Spinner />
            );
        }
        return(
            <FlatList
                    data={this.props.news.news}
                    renderItem={this.renderNewsCard} 
                    keyExtractor={item => item.id.toString()}

                    // No matter whatever I do, I am not able to run this :
                    onEndReached= {this.loadMoreNews}
                    onEndReachedThreshold={0}
            />
        );
    }

    render () {
        return (
            <View>
                {this.renderNewsList()}
            </View>
        );
    }
}
const mapStateToProps = state => {
    return {
        news: state.news,
        loading: state.news.loading,
    };
};

export default connect(mapStateToProps, { newsFetch })(NewsScreen);

无论我尝试什么，当flatlist 到达末尾时，我都无法运行我的函数loadMoreNews。

它快把我逼疯了！我已经尝试了所有的 stackoverflow 问题和答案，但我无法理解为什么我无法运行该函数。

我希望能够到达终点，以便添加基于无限滚动的功能。

【问题讨论】：

看起来loadMoreNews 除了console.log("Loading more...") 之外什么都没做？
你能分享你使用的所有 FlatList 道具吗？
@Sankalp 您是否尝试将 onEndReachedThreshold 增加到 0.4 或类似的值。我正在使用这样，并且工作正常 onEndReached={_.debounce(this.endScroll, 500)} onEndReachedThreshold={ 0.2}
@sdkcy我已经给出了上面的整个代码..
@WaheedAkhtar：是的.. 也试过了.. 没用... 不知道！！

标签： javascript reactjs react-native jsx react-native-flatlist

【解决方案1】：

loadMoreNews 应该是箭头函数或使用绑定方法。请更新loadMoreNews如下：

...
  loadMoreNews = () => {
    console.log("Loading more...");
  }
...

【讨论】：

我试过这个..它没有工作。我现在真的很困惑哈哈。

【解决方案2】：

尝试设置 onEndReachedThreshold 并像这样使用。

 onEndReached={_.debounce(this.endScroll, 500)} 
 onEndReachedThreshold={0.2}

【讨论】：