React Native Image URL会降低我的效果

Question

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

Answer 1

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

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

计算实际的屏幕分辨率

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

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