reactjs - React Native Image URL 降低了我的性能

Question

当我在启用分页的水平滚动视图中显示我的图像时，应用程序的性能会降低。我知道这是由于图像的高分辨率。我想要一个好方法，这样我就可以在不降低质量的情况下加载图像。先感谢您。

Answer 1

首先，使用 aFlatList而不是滚动视图可能会提高性能，因为屏幕外的图像不会被渲染。

其次，使用分辨率大于屏幕的图像只是浪费，因为它们无论如何都会被调整大小。您可以预先计算几种尺寸并使用最合适的一种来计算实际屏幕分辨率PixelRatio

var image = getImage({
  width: PixelRatio.getPixelSizeForLayoutSize(200),
  height: PixelRatio.getPixelSizeForLayoutSize(100),
});
<Image source={image} style={{width: 200, height: 100}} />

PixelRatio有关获取适当尺寸图像的更多详细信息，请参阅文档。