如何在本机反应中进行分页？

Question

我正在寻找一个很好的文档，它很好地解释了 react native 中的分页。我找不到我正在寻找的文档。我正在从服务器获取数据（包含 15 个问题和答案）。我想要在底部带有next 或previous 按钮的页面中显示单个问题。如何执行此操作？现在，我使用ScrollView 在单个页面中显示所有15 个问题。但我想要分页。请帮帮我。

Answer 1

var start=0;  // above class 

var end=100;


fetchData = () => {
        var mydata = realm.objects('Product_Info');
        this.setState({dbData: mydata})

        console.log("fetch----------    paggingData.start-->  " +    start);
        console.log("fetch----------    paggingData.end-->  " +    end);

        var newData = mydata.filtered('prodId > $0 AND prodId <= $1' , start, end);         // TODO Logic fetch Data

        let paggingData =[];
        paggingData = JSON.parse(JSON.stringify(this.state.paggingData));


        Object.keys(newData).map(key => {
            paggingData.push(newData[key])
        })

        this.setState({
            paggingData
        }, () => {
            console.log('Search-------------------------------PAGGGING  DATA \n', this.state.paggingData)

        })

        this.setState({dataProvider: dataProvider.cloneWithRows(paggingData)})          //TODO ... working in RecyclerView both

    }
    onScroll = () => {
        console.log("Scrolling");
    }

    onEndReached = () => {
        console.log("\n\n\n\n\--------------------------------------------Reached to End---------------------------------------------");

        start = end;
        end = end+100;

        this.fetchData()
    }


  <RecyclerListView
      layoutProvider={this.layoutProvider}
      dataProvider={this.state.dataProvider}
      rowRenderer={this.rowRenderer}
      onEndReached={this.onEndReached}
      onScroll={this.onScroll}
    />

Answer 2

库react-native-swiper将是在这种情况下使用的最佳选择。该示例在以下链接中提到here。

这个库使用 ScrollView ，每个项目都有 snap 动画效果，还包含自定义的 next 和 previous 按钮，如提到的 here .