小编HBS*_*Kan的帖子

题

人们如何实现无限数量的页面供您动态滑动？

细节

如果某个应用程序呈现了一天的页面,您可以在前一天向右滑动,在第二天向左滑动.

例如,FitNotes应用程序无缝地执行此操作:

向右/向左滑动与按下按钮5/6相同.并显示已呈现的页面.同时,也会渲染现在相邻日期的新页面.

最初,我认为这是你使用旋转木马做的事情,例如,使用react-native-snap-carousel库.我想象下面的例子,但使用状态变量而不是图像数组渲染页面.

所以,如果我想渲染一个日期在顶部的页面,我会有一个数组作为状态的一部分,例如:

carouselElements: [ '2019/01/21', '2019/01/22', '2019/01/23']

加入下面的旋转木马,我会得到三个页面,每个页面都显示在顶部.

<Carousel
    ref={(c) => { this._carousel = c; }}
    data={this.props.carouselElements}
    renderItem={this.renderDay}
    sliderWidth={sliderWidth}
    itemWidth={sliderWidth}
    enableSnap 
    firstItem={1}
    initialNumToRender={3}
    maxToRenderPerBatch={3}
    onBeforeSnapToItem={(index) => this.changeEvent(index)}
    useScrollView/>

问题1:阵列无限增长

你可以Day X提前两天开始并渲染相邻的.如果我向左滑动,您可以访问Day X+1并连接Day X+2到数组的末尾并渲染那一天.

该数组变为: [ 'Day X-1', 'Day X', 'Day X+1', 'Day X+2']

为了提高性能,我可以在3天的窗口内继续检查索引,只渲染选定的日期和相邻的两天.但是数组会无限增长,你的代码最多也是O(n).

问题2:索引

a)预先安排要素:

您可以从,Day X然后向右滑动.你现在正在展示Day X-1.您添加Day X-2到数组的开头并渲染它以准备向右滑动第二次.问题是你在索引0添加的元素你的系统是指向索引0的状态,当它从改变Day X-1到Day X-2,现在这样的页面显示Day X-2代替.

也就是说,当您向右滑动一天时,不是向后移动,而是每次滑动都会移回2天. …