React Native Image URL 降低了我的性能

【问题标题】：React Native Image URL lowers my performanceReact Native Image URL 降低了我的性能
【发布时间】：2017-12-28 11:39:37
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native react-native-flatlist react-native-scrollview react-native-image

【解决方案1】：

首先，使用FlatList 代替滚动视图可能会提高性能，因为不会呈现离屏图像。

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

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

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

【讨论】：