Question

这是我的代码：

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);

无论我做什么，loadMoreNews结束时都无法运行函数flatlist。

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

我希望能够走到尽头，以便可以添加基于无限滚动的功能。

Answer 1

loadMoreNews应该是箭头功能或使用bind方法。请按如下所示更新loadMoreNews：

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

Answer 2

尝试设置onEndReachedThreshold和使用这样的。

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

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

2 个答案: