React Native：在图像组件中显示像素数组（blurhash）答案

【问题标题】：React Native: Display array of pixels in Image component (blurhash)React Native：在图像组件中显示像素数组（blurhash）
【发布时间】：2020-07-18 21:42:31
【问题描述】：

如何在 React Native <Image> 组件中显示像素数组（UInt8ClampedArray 或 UInt8Array）？

我正在使用blurhash 库来解码我的网络端点发送给我的字符串，比如说UAKBgy~qM|IU0000-;M{_3t5D%RQ00_3xaIU，我想在我的视图中将其呈现为模糊图像。

我尝试将其设置为图像源的uri 属性，但图像没有显示任何内容。

import { decode } from 'blurhash';
// ...
const myHash = 'UAKBgy~qM|IU0000-;M{_3t5D%RQ00_3xaIU';
const result = decode(myHash, 32, 32);
const base64 = `data:image/jpeg;base64,${result.toString()}`;
const imgSource = { uri: base64 };
// ...
<Image source={imgSource} ...

decode 函数返回一个UInt8ClampedArray，它不能用作图像源。

谁能帮帮我？

【问题讨论】：

看起来解码函数返回原始图像数据。在构建数据 uri 之前，您可以使用基于 js 的 png/jpeg 编码器并将原始图像编码为正确的格式。

标签： arrays node.js reactjs image react-native

【解决方案1】：

所以我花了很长时间试图弄清楚这一点。我最终创建了自己的原生 UI 模块，该模块对图像进行原生解码，并使用原生 Image 组件（iOS 上的UIImageView 和 Android 上的ReactImageView）呈现它。

查看：mrousavy/react-native-blurhash

【讨论】：