Reactnative 我如何限制 FlatList 中的元素并增加负载

如果您的要求是将已存在的数据从已有的数据块中添加到12的块中，那么您可以考虑以下策略:使用onEndReached和onEndThreshold来处理滚动和一次添加12条记录.

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

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

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

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}
    />
    ...
  );
}

希望这会有帮助！