React Native：渲染无限数量的页面（双向滑动）

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：无限增长的数组

您可以从Day X 开始，提前两天渲染相邻的时间。 如果我向左滑动，您将访问 Day X+1 和 concat 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 时，您的系统指向索引 0 的状态，因此页面现在改为显示 Day X-2。

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

b) 移除元素

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

所以我的问题是： 人们如何通过页面滑动实现动态页面渲染广告无限？似乎很多应用都有它，我找不到任何人在谈论它。

---

编辑

编辑 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 帧（视图）。

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

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

当您向左或向右滑动时，您可以导出下一个或上一个 3 个 ID 并调用setState。 render 方法将调用本地缓存信息来获取这 3 个 ID 的视图属性并渲染新屏幕。 <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>要重新加载的元素。您可以通过将其 key 属性设置为由始终更改的状态变量定义来做到这一点。这是棘手的部分。

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 提供足够的缓存信息。如果缓存访问接近尾声，请确保请求新数据并在另一个方向删除一些缓存数据。

这里有一个用于 App.js 的 PasteBin 和一个 GitHub 项目，以便您测试整个想法。

Answer 2

这很有趣。

我认为还需要对系统设计进行一些更改。让我试着逐点给出答案。

问题 1：无限增长的数组 您不必在这里使用数组，因为我看到您添加滑动功能的标准是基于日期的。您必须具有日期函数来减去/添加到当前日期并向服务器发出相同的调用。收到数据后，您需要维护用户缓存，这将帮助您减少调用次数。

OR 如果您只想坚持使用数组，则必须仅在用户条目上加载 Date+-3 数据并将其仅保存在缓存中（或者新数据库是一种方法，但这会包括成本）。

问题 2：索引 a) 前置元素：

当您摆脱数组时，这应该不是问题。您可以使用状态，单个对象应该适合您。

b) 移除元素

您删除元素将基于日期而不是索引。因此，如果您收到某个日期的空响应，即Date-1，则拨打Date-2 的电话，由于您有 3 天的限制，您可以禁用空响应的滑动功能。

(或 如果您只处理数组，那么您必须有一个 cron 作业，它将为您更新数据）

希望对您有所帮助，如果您愿意，我可以更详细地介绍。