Question

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

 footer {
        background-color: #00bcd4;
        height: 40px;
    }

现在我有标准页码，点击每个页码我再次使用相应的页码调用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 prop。

设置endReached事件的触发时间

反复原生的分页

2 个答案: