如何使用Spinner在FlatList中添加更多记录反应本机(意味着-10 – 10条记录)手动！不是从使用服务器端

嗨,我正在开发基于FlatList的示例应用程序,这是我的代码.实际上我显示了整个记录,比如我有50条记录到我的账户.但现在我正在显示整个50条记录. Bur我需要在添加10条记录后显示10.但我不知道添加到FlatList.

这是我的代码：

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

请告诉我使用Activity Indicator加载更多记录.
提前致谢

如果我已正确理解您的问题,那么您正在寻找Flatlist中的无限滚动.您可以在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)}
           keyExtractor={item => item.id}
           ItemSeparatorComponent={() => <Divider style={{ marginTop: 5,alignItems: 'baseline' }} />}
           onEndReached={this.onScrollHandler}
           onEndThreshold={0}
        />
        ...
    );
}

本地更新

如果您已经提取了所有数据,但希望一次只显示10个数据,那么您需要做的就是更改fetchRecords

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]
  });
}

上述方法将在提取记录时显示活动指标.

希望这会有所帮助！