反应原生的分页

Question

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

 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 条记录的数据状态。

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

Answer 1

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

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

Answer 2

您可以使用 FlatList 的onEndReached 属性知道列表何时结束，然后您可以获取下一页内容，然后将接收到的数据推送到您现有的数据中。您可以使用 onEndReachedThreshold 属性设置何时触发 endReached 事件。