javascript - react-native limit List items -
i using flatlist react-native , listitem react-native-elements,
i want limit number of list-items loaded on screen.otherwise loads items have .
suppose have 300 list items want load 10 items ,instead of 300.
my code:
import react, { component } 'react' import { flatlist } 'react-native' import {avatar,tile,listitem} '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> ) } }
basically, need implement sort of pagination. can using onendreached , onendreachedthreshold(for more details here) of flatlist load more data when user reaches end of list.
you can change code so:
import react, { component } 'react'; import { flatlist } 'react-native'; import { avatar, tile, listitem } 'react-native-elements'; const initialdata = [0,...,299]; //all 300. receive server or stored 1 batch somewhere const items_per_page = 10; // batch size want load. export default class login extends component { constructor(props) { super(props); this.state = { data: [0,..., 9], // can initialdata.slice(0, 10) populate 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, receive next batch of items this.setstate({data: [...data, ...newdata]}); // here appending new batch 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> ); } }
Comments
Post a Comment