反应原生中的分页 [英] pagination in react native

问题描述

我正在 React Native 应用程序中实现分页，我的 Web API 提供总记录大小和选项以发送页面编号作为参数.www.URL.com/api/GetAll?pageNo={pageNumber}.目前我正在使用标准方法，即:

I am implementing pagination in react native app my Web API is giving total record size and option to send page no as a parameter. www.URL.com/api/GetAll?pageNo={pageNumber}. Currently I'm using the standard approach i.e:

 let pageNumbers = TotalRecords/PageSize;
       for(i=0; i<pageNumbers; i++)
       {
             pageNumberArray[i] = i + 1;
       }
this.setstate({pageNumber: pageNumberArray})




render()
{
this.state.data.map(function (data, index)
        {
<Card>
<CardItem>
<Text>SHOWING DATA HERE {data.Title}</Text>
</CardItem>
</Card>
}
{/*SHOWING PAGE NUMBERS*/}
    {this.state.totalRecrods > 1 && 
    <View>
 <FlatList
 height={50}
 style={{padding:10}}
    data={ this.state.pageNumber }
    renderItem={({item}) => <Text style={{backgroundColor:'rgb(191, 219,215)', margin:5,height:50}}>{item}</Text>}
   keyExtractor={(item, index) => index}
   horizontal={true}
/>
</View>

    }
}

现在我有了标准页码，点击每个页码，我再次使用相应的页码调用 URL，并更新显示接下来 50 条记录的数据状态.

Now I have standard page numbers and on click on every page number I called the URL again with respective page number and update the data state that shows next 50 records.

问题是我不喜欢移动应用中的这种传统方法.我想实现卡片视图，以便在滚动时自动加载另外 50 条记录.不向用户显示页码并节省点击页码转到下一页的所有时间.

The issue is I don’t like this traditional approach in mobile app. I want to implement the Card View such that on scroll it automatically loads another 50 records. Not showing page numbers to the user and saving all time clicking on page number to go to next page.

推荐答案

您可以使用以下代码.请注意，ListService.getList 是一个调用具有相关页码的 api 端点的函数.

You can use below code. Please note that ListService.getList is a function which calls the api end point with relevant page number.

class List extends Component {

    constructor() {
        super();
        this.state = {
            list: [],
            pageNumber: 1,
        };
        this.fetchList = this.fetchList.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
    }

    fetchList() {
        ListService.getList(this.state.pageNumber)
            .then((response) => {
                this.setState({ list: response.data, pageNumber: this.state.pageNumber + 1 });
            })
            .catch((error) => { });
    }

    onEndReached() {
        this.fetchList();
    }

    render() {
        return (
            <FlatList
                keyExtractor={(item, index) => item.ID}
                data={this.state.list}
                onEndReached={this.onEndReached}
                onEndReachedThreshold={0.3} />
        )
    }
};

这篇关于反应原生中的分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！