React Native 错误:FileReader,未实现readAsArrayBuffer

nkcskrwz  于 2023-05-01  发布在  React
关注(0)|答案(1)|浏览(301)

我在做什么?我试图将模糊颜色显示为Fastimages组件的占位符,就像在图像获取和加载时使用的编码和蓝色字符串**react-native-blurhash的帮助下,根据图像背景显示模糊颜色
有人能帮我做到这一点吗?这个包也有一个编码编码,但它不工作,所以我用
blurhash**包来做,但它给我这个错误错误:FileReader。readAsArrayBuffer未实现如何实现我的代码?

const PostCard = ({ postImage }) => {

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

    const generateBlurhash = async (postImage) => {
        const response = await fetch(postImage);
        const imageData = await response.arrayBuffer();
        const image = await createImageBitmap(imageData);
        const canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        const context = canvas.getContext('2d');
        context.drawImage(image, 0, 0);
        const imageDataArray = context.getImageData(0, 0, canvas.width, canvas.height).data;
        const blurhash = encode(imageDataArray, canvas.width, canvas.height, 4, 4);
        setBlurhashString(blurhash);
    };

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

    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                {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>
    );
};
46scxncf

46scxncf1#

你会得到这个错误,因为react-native的fetch实现无法处理缓冲区响应。
目前有一个开放的pull请求来修复这个问题(here),但是它已经开放了2年多,所以我不会屏住呼吸。
另一种选择是使用像axios这样的库。您需要在请求配置中设置responseType

const generateBlurhash = async (postImage) => {
        const response = await axios.get(postImage, { responseType: 'arraybuffer' });
        const imageData = response.data;
        const image = await createImageBitmap(imageData);
        // ...rest of your code

相关问题