如何在数组的特定索引处只渲染一次。反应本机

Question

所以基本上，我的问题源于试图解决这个问题。

function SwiperComponent () {

  const [item, setItems] = useState([["hi",console.log("hi")], ["hello",console.log("hello")], ["never",console.log("never")], ["sorry",console.log("sorry")]])
  const swiperItems = item.map(ite => {
    return(
        <View style={styles.slide1} >
          <Text style={styles.text}>{ite[0] + ite[1]}</Text>
        </View>
    )
  })
    return (
        <Swiper
            key={item.length}
            style={styles.slide1}
        >
          {swiperItems}
        </Swiper>
    )

}

所以我的代码相当简单，我使用 React-Native-Swiper 库，实质上使数组中的视图可滑动。

现在的问题是，当我运行代码时，它会同时生成数组中的所有视图，我知道这一点是因为我可以在控制台中看到打印语句都在打印开始时。随之而来的问题是，如果我有一长串图片，我不想一次检索所有这些图片，因为它会降低性能，但显然用户很可能不会去通过所有图像，在这种情况下，我会不必要地调用我的服务器来检索图像（我正在使用 firebase，所以我试图限制成本问题）。

那么如何才能在我开始滑动后靠近它们时才渲染这些图像？

Answer 1

您应该可以在 react-native-swiper 中使用 loadMinimal 设置。

这里需要通过设置loadMinimalSize.

来指定loadMinimal为真以及当前幻灯片前后需要加载的幻灯片数量

<Swiper
  key={item.length}
  style={styles.slide1}
  loadMinimal={true} // only loads the current page + [loadMinimalSize] amount of pages before and after
  loadMinimalSize={0}
  loadMinimalLoader={() => (
    <View>
      <Text>Loading</Text>
    </View>
  )} // optional loader to show while page loads
>
  {swiperItems}
</Swiper>

或者，您可以使用延迟加载图像库，它只会在您在阈值范围内滚动时加载图像。 https://github.com/Aljullu/react-lazy-load-image-component.

如何在数组的特定索引处只渲染一次。反应本机

How to only render something once at a specific index of an Array. React native

javascript

reactjs

react-native

react-native-swiper