这是我的代码:
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
结束时运行我的函数。
它让我发疯!我已经尝试了所有堆栈溢出问题和答案,但我无法理解为什么我无法运行该功能。
我希望能够到达终点,以便我可以添加基于无限滚动的功能。
loadMoreNews
应该是箭头函数或使用绑定方法。请按如下方式更新loadMoreNews
:
...
loadMoreNews = () => {
console.log("Loading more...");
}
...
尝试设置 onEndReachedThreshold 并像这样使用。
onEndReached={_.debounce(this.endScroll, 500)}
onEndReachedThreshold={0.2}