React Native实现FastImage Blurhash占位图遇FileReader报错求助

错误原因分析 #

你遇到的Error: FileReader.readAsArrayBuffer is not implemented是因为React Native环境不支持浏览器端的document、createImageBitmap、FileReader等Web API，你写的generateBlurhash函数是基于Web环境的代码，放到RN里必然无法运行。另外react-native-blurhash的编码功能需要依赖原生模块，之前调用无效大概率是因为原生模块未正确配置。

最优解决方案：服务端预生成Blurhash #

客户端生成Blurhash效率低且易出现兼容性问题，正确的做法是在图片上传或服务端处理阶段生成Blurhash字符串，将该字符串与图片URL一并传给前端，前端直接用react-native-blurhash组件渲染即可。

客户端临时解决方案（不推荐用于生产环境） #

如果一定要在客户端生成，需使用React Native原生的图片处理方式，配合react-native-blurhash提供的编码方法（需确保原生模块已正确安装配置）：

步骤1：确保react-native-blurhash安装正确 #

npm install react-native-blurhash
cd ios && pod install && cd ..

步骤2：修改代码适配RN环境 #

import React, { useState, useEffect, useMemo } from 'react';
import { View, ActivityIndicator, Image } from 'react-native';
import FastImage from 'react-native-fast-image';
import Blurhash, { encode } from 'react-native-blurhash';

const PostCard = ({ postImage }) => {
  const [isLoading, setIsLoading] = useState(true);
  const [blurhashString, setBlurhashString] = useState(null);
  const source = useMemo(() => ({ uri: postImage }), [postImage]);

  const generateBlurhash = async (uri) => {
    try {
      // 先获取图片尺寸
      const { width, height } = await new Promise((resolve) => {
        Image.getSize(uri, (w, h) => resolve({ width: w, height: h }));
      });
      // 使用react-native-blurhash的encode方法生成blurhash
      const blurhash = await encode(uri, 4, 4);
      setBlurhashString(blurhash);
    } catch (err) {
      console.error('生成blurhash失败:', err);
    }
  };

  useEffect(() => {
    generateBlurhash(postImage);
  }, [postImage]);

  return (
    <View style={styles.container}>
      <View style={styles.imageContainer}>
        {/* 模糊占位图与FastImage叠加，加载完成后隐藏占位图 */}
        {isLoading && blurhashString && (
          <Blurhash
            blurhash={blurhashString}
            style={styles.image}
          />
        )}
        <FastImage
          source={source}
          style={styles.image}
          cache={{
            immutable: true,
            cacheLocation: 'high-priority',
          }}
          priority={FastImage.priority.high}
          onLoadEnd={() => setIsLoading(false)}
        />
        {isLoading && <ActivityIndicator size='large' color='white' style={styles.spinner} />}
      </View>
    </View>
  );
};

// 示例样式，可根据需求调整
const styles = {
  container: {
    marginVertical: 8,
    marginHorizontal: 16,
  },
  imageContainer: {
    position: 'relative',
    borderRadius: 8,
    overflow: 'hidden',
  },
  image: {
    width: '100%',
    height: 240,
  },
  spinner: {
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: [{ translateX: -25 }, { translateY: -25 }],
  },
};

export default PostCard;

注意事项 #

• 远程图片直接调用encode可能存在跨域或缓存问题，建议先通过FastImage完成缓存后，再取本地缓存路径进行编码。
• 客户端生成Blurhash会占用较多CPU资源，影响APP运行流畅度，生产环境强烈建议采用服务端预生成方案。

内容的提问来源于stack exchange，提问作者Alan