React Native-在SectionList中渲染图像时，性能下降到10 fps

Question

我在水平FlatList（反应本机快照轮播）中有SectionLists。每个SectionList项目代表一个时间轴中的条目。一些项目只是文本，其他项目也有图像。

滚动时，每次在屏幕上可见图像时，fps降至10以下。如果我只注释<Image>标记，以便不渲染任何图像，则fps最高可达50> fps。

左侧的应用程序具有图像，右侧的应用程序具有<Image />组件已注释。

我只在Android上测试了该应用。为什么显示图像时fps会下降？

renderItem：

  render() {
    const {
      containerStyle,
      hourStyle,
      hourTextStyle,
      contentStyle,
      iconDashesStyle,
      titleText,
      descriptionText,
      notesText
    } = styles;

    const activity = this.props.item;
    const { type, category, date, note } = activity;

    return (
      <View style={containerStyle}>
        <View style={hourStyle} >
          <Text style={hourTextStyle}>
            {moment(date).format('HH:mm')}
          </Text>
        </View>
        <View style={iconDashesStyle}>
          {this.renderIcons()}
          {this.renderDashes()}
        </View>
        <View style={contentStyle}>
          <Text style={titleText}>{getActivityName(type, category).toUpperCase()}</Text>
          <Text style={descriptionText}>{getActivityDescription(activity)}</Text>
          <Text style={notesText}>{note}</Text>
          {this.renderImage()}
        </View>

      </View>
    );
  }

renderImage函数：

  renderImage() {
    const { type } = this.props.item;
    if (type === ID_SHARE_MOMENT && this.props.image) {
      const { uri, ratio } = this.props.image;
      return (
        <View
          ref={r => (this.imgRef = r)}
          style={[styles.momentImgContainer, { aspectRatio: ratio }]}
          collapsable={false}
        >
          <TouchableOpacity onPress={this.onPressImage}> 
            <Image
              style={styles.momentImg}
              source={{ uri }}
              resizeMode='cover'
            />
          </TouchableOpacity>
        </View>
      );
    }
  }

第二个没有图像的应用程序具有renderImage如下：

       <TouchableOpacity onPress={this.onPressImage}> 
       { /* 
         <Image
           style={styles.momentImg}
           source={{ uri }}
           resizeMode='cover'
         />
       */ }
       </TouchableOpacity>

编辑1

[尝试提高我的应用程序性能时，我遵循了link of Adam Stanford on medium，它建议直接从应用程序包（通过Xcode资产目录或Android drawable文件夹包含的图像）中加载静态资产。

我从上面显示的屏幕之前的输入屏幕的背景图像开始，该屏幕仅具有背景图像，徽标和微调框：

仅通过在第一张图片中进行此操作，看看发生了什么：

即使在时间轴中渲染图像，fps也高达40+。但是，我不了解这种关系...

Answer 1

在开发模式下，rn从http提供图片。您是否将js和资产捆绑在一起并获得开发apk？

如果解压缩apk，您可以在drawble文件夹中看到图像，那么捆绑资产不等于将图像手动放置到drawble文件夹中吗？

我只能看到的是您处理图像uri的路径之间存在差异，并且apk生成后两个资产都位于同一位置