我构建了一个相当基本的 React Native iOS 应用程序;它是几个屏幕，用户可以从"主页"组件单击进入，每个屏幕都由仅包含文本/视图/图像组件的基本组件组成。
在模拟器中，该应用程序是响应式的，并且没有任何JS控制台警告，但是当我发布到iPad(Air 2)时，主屏幕和某些其他屏幕之间存在明显的延迟。这些是具有更多图像的屏幕。
我想知道这是否是因为我正在使用更大的图像(该应用程序是为 iPad Pro 2 设计的)并将图像缩小以在我想要的地方使用。最严重的违规者是具有砖石样式图像网格的页面。不过，在ScrollView中仍然只有大约30个。一旦组件显示，应用程序就会响应更快。
我已经采取措施来优化我的组件，尽可能使用扩展 PureComponent 或使用无状态函数，控制台日志记录显示可触摸设备会立即响应，因此延迟肯定是在组件的渲染时间。
注：注：所有图像都是本地的(通过require('./path/to/file')加载)，没有通过网络加载任何内容。
下面是填充要在 ScrollView 中显示的项数组的代码示例：
...
const items = mediaItems.map((item, index) => {
// scale desired width (1044 for video, 520 for images) based on designed width and device aspect ratio.
const imageWidth = item.video ? (1044/2732) * deviceWidth : (520/2732) * deviceWidth
return (
<TouchableHighlight key={index} onPress={() => onOpen(item)}>
<View style={[styles.gridImageView, { width: imageWidth }]}>
<Image style={styles.gridImage} source={item.image} />
</View>
</TouchableHighlight>
)
});
...
gridImageView和gridImage的样式如下：
...
gridImageView: {
height: (460/2732) * width,
margin: (2/2732) * width,
position: 'relative'
},
gridImage: {
resizeMode: 'cover',
width: null,
height: null,
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
...
所以我的问题有点多层次：
- 关于确保组件快速显示的最佳实践是什么？
- 我不应该在图像本身上设置宽度/高度吗？
- 在让用户开始浏览应用程序之前，我是否应该以我想要的大小对图像进行某种预加载？
- 我应该使用 JPG 而不是 PNG 图像吗？
- 我缺少其他技巧吗？
Should I not be setting a width/height on the image itself at all
- 您必须设置宽度和高度。如果不这样做，您的图像将不会显示
Should I be doing some kind of pre-loading of the images in the sizes I want before I let the user begin to navigate around the app?
- 最好事先下载图像。巨大的图像需要大量的性能。如果您在显示图像之前调整图像大小，您的问题可能已经消失了。因此，您可以使用 react 本机图像调整器
Should I be using JPG instead of PNG images?
- 您应该使用 JPG，因为它们提供更高的压缩率。