android - react native : Rendering infinite number of pages (bi-directional swiping)

Question

问题

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

详情

如果某个应用在一天内呈现一个页面，您可以预期在前一天向右滑动，在第二天向左滑动。

例如，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:无限增长的数组

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

数组变为:[“第 X-1 天”、“第 X 天”、“第 X+1 天”、“第 X+2 天”]

为了提高性能，我可以针对 3 天的窗口不断检查索引，并且只渲染选定的那一天和相邻的两天。但是数组会无限增长，而您的代码充其量是 O(n)。

问题 2:索引

a) 前置元素:

您可以从 第 X 天 开始，然后向右滑动。您现在正在显示 Day X-1。您将 Day X-2 添加到数组的开头并渲染它以准备第二次向右滑动。问题是您在索引 0 处添加了一个元素。当它从 Day X-1 更改为 Day X-2 时，您的系统指向索引 0 的状态，因此该页面现在改为显示 Day X-2。

也就是说，您向右滑动不是后退一天，而是每次滑动后退 2 天。

b) 删除元素

如果我删除一个元素以保持数组较小，一切都会改变但索引保持不变。索引现在指向与数组中的预期元素不同的元素，这在索引可以更正之前反射(reflect)在呈现的页面中。

因此我的问题:人们如何通过页面滑动实现无限的动态页面渲染？似乎很多应用程序都有它，但我找不到任何人谈论它。

---

编辑

编辑 1:添加图片并进行相应的编辑以更好地解释我的问题。

编辑 2:我有一个可用的实现 react-native-swiper这基本上需要一个巨大的数组，并且只呈现紧邻显示页面的一批幻灯片。

<Swiper style={styles.wrapper} 
          showsButtons={false}
          index={currentDateIndex}
          loadMinimal={true}
          loadMinimalSize={1}
          showsPagination={false}
          loop={false}
          onIndexChanged={(index) => dispatch(changeSelectedDayByIndex(index))}
         >
          {dates.map((item) => 
              this.renderDay(item)
            )
          }
</Swiper>

但是，dates.map 命令会在启动时造成很大的性能损失。

编辑 3:在映射之前在日期数组上使用 slice 命令似乎不是一个选项，因为我会在现有状态转换期间呈现..

Answer 1

此解决方案基于此 react-native-swiper你提到。如果缓存正确完成，这是一个棘手的解决方案。它基于以下假设:

• 给定一个 ID，您可以导出 ID+1 和 ID-1。 (这对日期有效)
• 您只能向左或向右滚动 1 帧( View )。

想法是在 <Swiper> 周围有一个包装器组件保存具有 3 个 ID 的状态数组:当前、左侧和右侧。

state = {
  pages: ["2", "3", "4"],
  key: 1
}

当你向左或向右滑动时，你可以导出下一个或前一个 3 个 ID 并调用 setState . render方法将调用本地缓存信息来获取这 3 个 ID 的 View 属性并渲染新的屏幕。 <Swiper>元素总是必须指向 index={1}作为初始参数，并保持这种方式。

const cache = {
  "0": "zero",
  "1": "one",
  "2": "two",
  "3": "three",
  "4": "four",
  "5": "five",
  "6": "six",
  "7": "seven",
  "8": "eight",
  "9": "nine",
  "10": "ten"
}

renderItem(item, idx) {
    const itemInt = parseInt(item)
    const style = itemInt % 2 == 0 ? styles.slide1 : styles.slide2
    return (
      <View style={style} key={idx}>
        <Text style={styles.text}>{cache[item]}</Text>
      </View>
    )
  }

但是，当您滑动时，它会将当前索引设置为 2 或 0。因此，为了使其始终指向索引 1(同样，因为您移动并重新加载)，您必须强制 <Swiper>要重新加载的元素。您可以通过将其键属性设置为由始终更改的状态变量来定义。这是棘手的部分。

onPageChanged(idx) {
    if (idx == 2) {
                                                 //deriving ID+1
      const newPages = this.state.pages.map(i => (parseInt(i)+1).toString())
      this.setState({pages: newPages, key: ((this.state.key+1)%2) })
    } else if (idx == 0) {
                                                 //deriving ID-1
      const newPages = this.state.pages.map(i => (parseInt(i)-1).toString())
      this.setState({pages: newPages, key: ((this.state.key+1)%2) })
    }
  }

render() {
    return (
      <Swiper
        index={1}
        key={this.state.key}
        style={styles.wrapper}
        loop={false}
        showsPagination={false}
        onIndexChanged={(index) => this.onPageChanged(index)}>
        {this.state.pages.map((item, idx) => this.renderItem(item, idx))}
      </Swiper>
    );
  }

除此之外，您还必须确保始终为您的 ID 缓存足够的信息。如果缓存访问接近尾声，请确保请求新数据并从另一个方向删除一些缓存数据。

这是一个 PasteBin对于 App.js 和 GitHub项目，以便您可以测试整个想法。