react-native limit列表项 [英] react-native limit List items

问题描述

我正在使用来自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列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！