我在做什么?我试图将模糊颜色显示为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>
);
};
1条答案
按热度按时间46scxncf1#
你会得到这个错误,因为react-native的
fetch
实现无法处理缓冲区响应。目前有一个开放的pull请求来修复这个问题(here),但是它已经开放了2年多,所以我不会屏住呼吸。
另一种选择是使用像axios这样的库。您需要在请求配置中设置
responseType
: