嗨,我正在开发基于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] }); }
希望这会有所帮助!