Question

我的技能是基本的，我是React原生的新手，我想做的是限制12中的帖子，当用户滚动时自动加载更多的帖子。

我的代码：

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}

    />
);}}

Answer 1

如果您的要求是将现有列表从已经提取的数据中追加到12块，那么您可以考虑使用from pylab import * import numpy as np x1 = arange(data) #for example this is a list y1 = arange(data) #for example this is a list x=np.array(x) #this will convert a list in to an array y=np.array(y) m,b = polyfit(x, y, 1) plot(x, y, 'yo', x, m*x+b, '--k') show()和onEndReached来处理滚动并添加12条记录的策略一段时间。

在构造函数

中将当前onEndThreshold编号设置为page

在constructor(props){ super(props); this.state = { ... , page: 0, posts: [] } }内，您需要从服务器提取所有数据并将其存储在本地状态（您当前正在执行），然后调用将读取前12条记录的函数。

componentDidMount

现在添加将添加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);
  });
}

希望这会有所帮助！

Answer 2

您可以在获取数据源中的jsondata时添加slice（start，end）方法。这个技巧可以解决您的问题。

dataPosts：responseJson.slice（0,10）将此行替换为您的行。

我如何限制FlatList中的项目并添加更多负载？

2 个答案: