问题描述
我正在使用来自react-native和 Flatlist 来自react-native-elements的href =https://react-native-training.github.io/react-native-elements/API/lists/\"rel =nofollow noreferrer> ListItem,
i am using Flatlist from react-native and ListItem from react-native-elements,
我想最初限制屏幕上加载的列表项的数量。否则它会加载我最初拥有的所有项目。
i want to initially limit the number of list-items that are loaded on the screen.Otherwise it loads all the items that i have initially .
假设我有300个列表项,但最初我只想加载10个项目,而不是300个。
Suppose i have 300 list items but initially i only want to load 10 items ,instead of 300.
MY CODE:
import React, { Component } from 'react'
import {
FlatList
} from 'react-native'
import {Avatar,Tile,ListItem} from 'react-native-elements'
export default class Login extends Component{
constructor(props) {
super(props);
this.state = {
data:[],
dataSource: []
};
}
renderList(item,i){
return(
<View>
<ListItem
subtitle={
<Avatar
small
rounded
source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"}}
/>
{<Text>{item.body}</Text>}
}
/>
<View>
)
}
render(){
return(
<View>
<List>
<FlatList
data={this.state.data}
keyExtractor={item => item.id}
renderItem ={({item,index}) => this.renderList(item,index)}
/>
</List>
</View>
)
}
}
推荐答案
基本上,你需要的是实现一种分页。您可以使用 onEndReached
和 onEndReachedThreshold
来执行此操作(有关详细信息,请参阅) FlatList
在用户加载更多数据时到达列表末尾。
Basically, what you need is to implement sort of pagination. You can do it by using onEndReached
and onEndReachedThreshold
(for more details look here) of FlatList
to load more data when user reaches the end of list.
您可以像这样更改代码:
You can change your code like so:
import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { Avatar, Tile, ListItem } from 'react-native-elements';
const initialData = [0,...,299]; //all 300. Usually you receive this from server or is stored as one batch somewhere
const ITEMS_PER_PAGE = 10; // what is the batch size you want to load.
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
data: [0,..., 9], // you can do something like initialData.slice(0, 10) to populate from initialData.
dataSource: [],
page: 1,
};
}
renderList(item, i) {
return (
<View>
<ListItem />
</View>
);
}
loadMore() {
const { page, data } = this.state;
const start = page*ITEMS_PER_PAGE;
const end = (page+1)*ITEMS_PER_PAGE-1;
const newData = initialData.slice(start, end); // here, we will receive next batch of the items
this.setState({data: [...data, ...newData]}); // here we are appending new batch to existing batch
}
render() {
return (
<View>
<FlatList
data={this.state.data}
keyExtractor={item => item.id}
renderItem={({ item, index }) => this.renderList(item, index)}
onEndReached={this.loadMore}
/>
</View>
);
}
}
这篇关于react-native limit列表项的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!