React native 如何在FlatList react native（表示-10-10条记录）中使用微调器手动添加加载更多记录！不是因为使用服务器端

嗨，我正在开发基于平面列表的示例应用程序。这是我的代码。事实上，我展示了所有的记录，就像我的账户上有50条记录一样。但现在我展示了全部50张唱片。但是我需要在添加到10条记录后显示10条。但我不知道是否要添加到平面列表中

这是我的代码：

<FlatList
                    data={this.state.profiles}
                    renderItem={({ item, index }) => this.renderCard(item, index)}
                    keyExtractor={item => item.id}
                    ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
                />


renderCard (profile, index) {
    console.log('rendercard', profile);
    //
    return (
        <View key={profile.id}>
            <ProfileCard
                profile={profile}
                style={styles.card}
                onPress={() => this.props.screenProps.rootNavigation.navigate('Profile', { profile: this.state.profile, id: profile.id })}
                // onPress={() => alert('PROFILE')}
                onAddClick={() => this.setState({ connectionPageVisible: true, cardProfile: profile })}
                connectedIds={(this.props.screenProps && this.props.screenProps.connectedIds) || this.props.connectedIds}
            />
        </View>
    );
}

this.renderCard（项，索引）}
keyExtractor={item=>item.id}
ItemSeparatorComponent={（）=>}
/>
renderCard（配置文件、索引）{
console.log（'rendercard'，profile）；
//
返回(
this.props.screenProps.rootNavigation.navigate（'Profile'，{Profile:this.state.Profile，id:Profile.id}）
//onPress={（）=>alert（'PROFILE'）}
onAddClick={（）=>this.setState（{connectionPageVisible:true，cardProfile:profile}）
connectedIds={（this.props.screenProps&&this.props.screenProps.connectedIds）| | this.props.connectedIds}
/>
);
}

请向我显示使用活动指示器加载更多记录。

---

提前感谢

如果我正确理解了您的问题，那么您正在

平面列表中寻找
无限滚动
。您可以借助
onEndReached
和
onEndThreshold
属性来实现这一点

考虑以下原型

假设您正在将记录存储到
this.state.profiles
中

从服务器中提取新记录

在构造函数中设置初始页码

constructor(props){
   super(props);
   this.state = { page: 0}
}

获取新记录

fetchRecords = (page) => {
    // following API will changed based on your requirement
    fetch(`${API}/${page}/...`)
    .then(res => res.json())
    .then(response => {
       this.setState({
           profiles: [...this.state.profiles, ...response.data] // assuming response.data is an array and holds new records
       });
    });
}

处理滚动

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

渲染功能

render() {
    return(
        ...
        <FlatList
           data={this.state.profiles}
           renderItem={({ item, index }) => this.renderCard(item, index)}
           keyExtractor={item => item.id}
           ItemSeparatorComponent={() => <Divider style={{ marginTop: 5, marginLeft: width * 0.2 + 20 }} parentStyle={{ backgroundColor: globalStyles.BG_COLOR, alignItems: 'baseline' }} />}
           onEndReached={this.onScrollHandler}
           onEndThreshold={0}
        />
        ...
    );
}

在拉取记录时，上述方法将显示
活动指示器

希望这会有帮助
 理想情况下，如果您是从一些
api
获取概要文件，那么您需要在
api
中添加一个限制，以返回10个结果，并为接下来的10个元素添加一个url对象，依此类推，就像
SoundCloud
所做的事情感谢您的响应！从服务方面看，他们没有提供任何尺码限制。谢谢您的回复。但我正在从api获取所有记录。在我的api中，我没有任何页面大小属性或关键字OK，为此我提供了
本地更新
，其中假设所有数据首先被提取，然后当用户到达列表末尾时，它将从本地状态填充数据。查看
本地更新
part.BTW，
页面
仅在本地进行注释，以指示标记。我只是想让它可扩展，这样如果API中有任何更改，您所需要做的就是更改
fetchRecords
方法。我的意思是，现在您正在从本地填充数据，如果将来从后端填充数据有任何更改，那么您只需要更改fetch方法。我认为
本地更新
部分应该可以解决您的问题。但是我的api没有大小选项
fetchRecords = (page) => {
  // assuming this.state.records hold all the records
  const newRecords = []
  for(var i = page * 10, il = i + 10; i < il && i < this.state.records.length; i++){
      newRecords.push(this.state.records[i]);
  }
  this.setState({
    profiles: [...this.state.profiles, ...newRecords]
  });
}