反應原生限列表項

Question

我使用的反應本地Flatlist和反應本土元素ListItem，

我想最初限制被裝上screen.Otherwise其列表項的數目加載我最初的所有項目。

假設我有300列表項但最初我只是想加載，而不是300

我的代碼10項：

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

Answer 1

基本上，你需要的是實現排序分頁的。您可以通過使用onEndReached和onEndReachedThreshold（更多詳細信息請參閱here）FlatList來在用戶到達列表末尾時加載更多數據。

你可以改變你的代碼如下所示：

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