Не удалось запустить onEndReached в компоненте React Native Flatlist - PullRequest
Новая
       22

Не удалось запустить onEndReached в компоненте React Native Flatlist

0 голосов
/ 02 февраля 2019

Вот мой код: 

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 и не могу понять, почему я не могу запустить функцию.

Я хочу быть в состоянии достичь конца, чтобы я мог добавить функциональность на основе бесконечной прокрутки.

Ответы [ 2 ]

0 голосов
/ 02 февраля 2019

Попробуйте установить onEndReachedThreshold и использовать так. 

 onEndReached={_.debounce(this.endScroll, 500)} 
 onEndReachedThreshold={0.2}
0 голосов
/ 02 февраля 2019

loadMoreNews должно быть функцией стрелки или использовать метод связывания.Пожалуйста, обновите loadMoreNews следующим образом: 

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