0

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

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，所以我试图限制这一点以解决成本问题）。

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

4

1 回答 1

1

您应该能够使用loadMinimalreact-native-swiper 中的设置。

在这里，您需要指定loadMinimal为 true 以及通过设置在当前幻灯片之前和之后需要加载的幻灯片数loadMinimalSize。

<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。

于 2020-05-14T23:57:27.207 回答