React Native 图像加载太慢

Question

我从

react-native-image-filter

获取了 22 张图像。 这些图像是base64 格式。这是渲染函数的代码。

  render() {
    const { images, imageIndex } = this.state;
    return (
      <View style={styles.container}>
        {images?.length > 21 && <View style={{ flex: 1 }}>
          <Image resizeMode={'contain'} source={{ uri: `data:image/png;base64,${images[imageIndex]?.base64}` }} style={{ width: 400, flex: 1 }} />
        </View>}
        <View style={{ height: 140, paddingVertical: 20 }}>
          <ScrollView horizontal>
            {images?.map((item, index) => {
              return (
                <View style={[{ marginHorizontal: 10 }, styles.center]}>
                  <Image
                    resizeMode={'cover'}
                    key={index.toString()}
                    onPress={() => this.setState({ imageIndex: index })}
                    source={{ uri: `data:image/png;base64,${item.base64}` }}
                    style={{ width: 80, height: 100, borderRadius: 8 }} />
                </View>
              )
            })}
          </ScrollView>
        </View>
      </View>
    );
  }

一切都很好，但是图片加载太慢了。 如何提高加载速度？

Answer 1

问题肯定出在 Base64 编码的图像中。

速度变慢是因为 React Native 必须通过 Native

JS 桥来回传递相当长的 Base64 字符串，而且本机平台必须解析 Base64 并将其转换为本机图像视图的正确内存表示形式。因此错过了平台提供的许多优化。<->

理想情况下，所有图像操作都应该发生在本机平台上，并且任何实际图像数据都不应该接触 JS。

我建议尝试这两个库以获得更高性能的过滤器实现：

• https://github.com/GregoryNative/react-native-gl-image-filters
• https://github.com/iyegoroff/react-native-image-filter-kit