Image react-native：从iOS和Android的base64字符串创建图像（在react-native元素列表中）

我试图通过REST调用在DB的动态（react native elements）列表中显示图标，REST调用将图标作为base64编码字符串传递（即，这里使用jHipster/swagger完成）

它必须同时适用于iOS和Android

我认为这应该是一个非常常见的用例，但结果有点挑战性

到目前为止，我尝试的是：

使用静态addImageFromBase64（base64ImageData，成功，失败）

• 仅适用于iOS（

  @platform-iOS

  ）

使用类似以下示例的'data:'uri方案（如上所述）：

var base64Icon='数据：图像/png；base64，Ivborw0kggoaaans。。。

事实上，它是有效的，我只是总是结合一些不同的缺陷，还添加了React-native元素来增加混乱…
感谢您用高度/宽度提示引导我走向正确的方向

如果其他人对图像和

“数据：”

方案有问题，这些是我遇到的主要障碍：

对于React Native

：

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS ...
<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>

• 如果在
  中使用

  'data:'

  ，至少必须在样式中提供宽度和高度
• 其中提到：
  与静态资源不同，您需要手动指定图像的尺寸。
  
• 但不幸的是，

  图像

  组件的参考中没有提到它，也没有提到

  “数据：”

  方案

这是React Native

的一个工作示例：

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANS ...
<Image style={{width: 50, height: 50}} source={{uri: base64Icon}}/>

使用

化身

道具（无

样式

，但可选

化身样式

）反应本机元素

的工作示例：

{            
myItems.map（（item，i）=>(
))
}

到目前为止，这一切都是非常好的，一旦理解。。。很抱歉问了这个愚蠢的问题；-）

因此，因为我所有的困惑都与文档有关，所以我将为React Native和Elements文档提出一些PRs

编辑：PR现在被合并了，关于带有“data:”uri模式的图像的文档更改和指定大小的需要是公开的！在中搜索“数据：

---

在Android上使用

uri

的base64编码图像有什么问题？当我在我的设备上测试它时，它可以工作。两件事，看看当加载更大的图片时线程是否可以为您解决一些问题（我们有一个类似的用例）。您是否在图片样式中添加了高度/宽度？是否适用于npm run webMy doc对带有“data:”uri模式的图像的更改以及指定大小的需要是公开的？同时，搜索“data:”：感谢facebook开发团队的合并！我从api中获取多个base64项目，在移动base64平台中工作，如果Platform.OS===='web'，我无法在web中看到应用程序图标