反应原生图像加载太慢答案

【问题标题】：react native image loading is too slow反应原生图像加载太慢
【发布时间】：2021-04-19 23:41:08
【问题描述】：

我从 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>
        );
      }

一切都很好，但是图像加载太慢了。我怎样才能创造加载速度？帮帮我...

【问题讨论】：

标签： image react-native base64

【解决方案1】：

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

速度变慢是因为 React Native 必须通过 NativeJS 桥来回传递相当长的 Base64 字符串，加上原生平台必须解析 Base64 并将其转换为原生图像视图的正确内存表示。因此错过了平台提供的许多优化。

理想情况下，所有的图像操作都应该在原生平台上进行，实际的图像数据甚至都不应该触及 JS。

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

【讨论】：