React Native - 在部分列表中渲染图像时性能下降至 10 fps

Question

我在水平 FlatList (react-native-snap-carousel) 中有部分列表。每个SectionList 项目代表时间线中的一个条目。有些项目只是文本，其他项目也有图像。

滚动时，每当屏幕上出现图像时，fps 就会下降到 10 以下。如果我简单地注释<Image>标签以便不渲染图像，则 fps 会上升到 50>fps。

左边的应用程序有图像，右边的应用程序有<Image />组件评论。

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

渲染项目：

  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() {
    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

在尝试提高我的应用程序的性能时，我点击了Medium 上 Adam Stanley 的链接，该链接建议直接从应用程序包加载静态资源（通过 Xcode 资源目录或 Android 可绘制文件夹中包含的图像）。

我从上面显示的屏幕之前的输入屏幕的背景图像开始，它只有背景图像、徽标和微调器：

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

即使在时间轴中渲染图像时，fps 也高达 40+。不过，我不明白其中的关系...