如何限制 FlatList 中的项目并添加更多负载? [英] How i can limit the items in the FlatList and add load more?

问题描述

我的技能是基本的，我是 React Native 的新手，我想做的是将帖子限制在 12 个，当用户滚动时自动加载更多帖子.

My skills is basic, and i'm newbie in React native, what i want to do is limit the posts in 12 and when the user scroll automatically load more posts.

我的代码:

export default class Posts extends Component {
constructor(props) {
super(props);
this.state = {
  isLoading: true,};}

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
     .then((response) => response.json())
     .then((responseJson) => {
       this.setState({
         isLoading: false,
         dataPosts: responseJson
       }, function() {
       });
     })
     .catch((error) => {
     });}

render() {
return (
    <FlatList
      data={ this.state.dataPosts }
      numColumns={2}
      renderItem={({item}) => 
            <TouchableOpacity activeOpacity={1} style={{flex: 1}}>
            <View style={{margin: 5, marginLeft: 4}}>
            <ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}}>
                <LinearGradient colors={['rgba(0,0,0,0.3)', 'rgba(0,0,0,0.8)']}>
                        <Text numberOfLines={2}>{item.post_title}</Text>
                </LinearGradient>
            </ImageBackground>
            </View>
            </TouchableOpacity>
}
    keyExtractor={(item, index) => index}

    />
);}}

推荐答案

如果您的要求是将已拉取的数据的现有列表附加到 12 个块中，那么您可以考虑以下使用 onEndReached 和 onEndThreshold 来处理滚动并一次添加 12 条记录.

If your requirement is to append the existing list from already pulled data in a chunk of 12, then you may consider following strategy which uses onEndReached and onEndThreshold to handle the scroll and add 12 records at a time.

在构造函数中设置当前page号为0

Set current page number to 0 in constructor

constructor(props){
  super(props);
  this.state = {
    ... ,
    page: 0,
    posts: []
  }
}

在 componentDidMount 内部，您需要从服务器中提取所有数据并将其存储在本地状态(您当前正在执行的操作)中，然后调用将读取前 12 条记录的函数.

Inside componentDidMount you need to pull all data from the server and store it in the local state (which you are currently doing), then call the function which will read first 12 records.

componentDidMount() {
   return fetch(ConfigApp.URL+'json/data_posts.php')
   .then((response) => response.json())
   .then((responseJson) => {
     this.setState({
       isLoading: false,
       page: 0,
       dataPosts: responseJson
     }, function() {
       // call the function to pull initial 12 records
       this.addRecords(0);
     });
   })
   .catch((error) => {
   });
}

现在添加从 this.state.dataPosts

addRecords = (page) => {
  // assuming this.state.dataPosts hold all the records
  const newRecords = []
  for(var i = page * 12, il = i + 12; i < il && i < 
    this.state.dataPosts.length; i++){
    newRecords.push(this.state.dataPosts[i]);
  }
  this.setState({
    posts: [...this.state.posts, ...newRecords]
  });
}

现在添加滚动处理程序

onScrollHandler = () => {
  this.setState({
    page: this.state.page + 1
  }, () => {
    this.addRecords(this.state.page);
  });
}

渲染功能

render() {
  return(
    ...
    <FlatList
       ...
       data={this.state.posts}
       renderItem={({item}) => ... }
       keyExtractor={(item, index) => index}
       onEndReached={this.onScrollHandler}
       onEndThreshold={0}
    />
    ...
  );
}

希望这会有所帮助！

这篇关于如何限制 FlatList 中的项目并添加更多负载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！