Question

我正在寻找一份很好的文件，很好地解释了原生反应中的分页。我无法找到一个我正在寻找的人。我从服务器获取数据（一套15个问题）我希望在一个页面中显示单个问题，底部有next或previous按钮。如何做到这一点？现在我在一个页面中显示所有15个问题ScrollView页面。但我想要分页。请帮助我。

Answer 1

图书馆react-native-swiper最适合在这种情况下使用。示例在以下链接here中提及。

此库使用ScrollView，每个项目都有快照动画效果，还包含自定义的next和previous提到按钮here。

Answer 2

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

怎么做反应本机的分页？

2 个答案: