Question

我已经构建了一个相当基本的React Native iOS应用程序;用户可以从“主页”组件点击进入的几个屏幕，每个屏幕由基本组件组成，仅包含文本/视图/图像组件。

在模拟器中，应用程序是响应式的，并且没有任何JS控制台警告，但是当我向iPad（Air 2）发布时，主屏幕和某些其他屏幕之间存在明显的延迟。这些特别是有更多图像的屏幕。

我想知道是不是因为我正在使用更大的图像（该应用程序是专为iPad Pro 2设计的）并且缩小图像以便在我想要的地方使用。最糟糕的罪犯是一个页面，有一个砖石风格的图像网格。尽管如此，ScrollView中仍然只有大约30个。一旦组件显示一旦应用程序响应更快。

我已经采取措施在使用扩展PureComponent或尽可能使用无状态函数方面优化我的组件，并且控制台日志记录向我显示触摸器立即响应，因此延迟肯定是在组件的渲染时间

N.B。所有图像都是本地的（通过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图像吗？
- 我还缺少另一个技巧吗？

Answer 1

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 native image resizer

Should I be using JPG instead of PNG images?

您应该使用JPG，因为它们提供更高的压缩率。

iOS版本的性能低于开发性能

1 个答案: