react-native：从iOS和Android的base64字符串创建映像（在react-native-elements列表中）

Question

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

它必须适用于iOS和Android。

我认为这应该是一个非常常见的用例，但事实证明有点挑战......

到目前为止我尝试了什么：

1. 使用static addImageFromBase64(base64ImageData, success, failure) 请看这里
   • 仅适用于iOS（ @platform ios ）
2. 使用'data：'uri方案就像这个例子（如这里讨论的）：

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

• 该讨论中提到的PR后来被关闭，但不知何故似乎仍然引入了'data：'方案，参见RCTConvert.m ，尽管它没有记录在Image中
• 但似乎它只是为iOS实现（仅在.m文件中）
• 看看Android版的图像 ，似乎渲染被委托给原生端，这可能是它没有为Android实现的原因（至少它在Android中不起作用）。

那么有什么好方法可以将base64图像字符串转换为Android反应原生应用程序吗？

或者是否有一个很好的实践或库来解决这个问题（以完全不同的方式从动态数据库通过REST API动态获取图标到反应原生应用程序中）？

Answer 1

事实上它是有效的，我只是总是结合一些不同的缺陷，并添加了React原生元素，以增加混乱...
感谢martwetzels通过高度/宽度提示引导我朝着正确的方向前进。

如果其他人对图像和'data:'方案有问题，这些是我遇到的主要障碍：

1. 对于React Native <Image> ：

   • 如果你在<Image>使用'data:' ，至少你必须提供样式的宽度和高度
   • 这是针对图像指南中的网络图像提到的 ：
     与静态资源不同，您需要手动指定图像的尺寸。
     
   • 但不幸的是，它不在Image组件的参考中 ，也没有在任何地方提到'data:'方案

   所以这是React Native <Image>一个工作示例：

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

2. 对于react-native-elements <List>中的图像

   • 只有avatar道具会带一个url - leftIcon道具是来自包含图书馆的图标，例如仅限材料图标 - 或者用于单独的React Native元素
   • avatar道具可以有一个可选的单独的avatarStyle ，但默认会自动缩放图像
   • 带有嵌套<Image>的leftIcon prop将再次需要一个样式来显示图片，至少具有宽度和高度

   React Native Elements <List>一个工作示例，其中leftIcon prop以<Image>为元素（ style必需！）：

    <List> { myItems.map((item, i) => ( <ListItem key={i} title={item.name} leftIcon={<Image style={{width: 35, height: 35}} source={{uri: item.base64Icon}}/>} /> )) } </List> 

   具有avatar道具的React Native Elements <List>的工作示例（没有style ，但是可选的 avatarStyle ）：

    <List> { myItems.map((item, i) => ( <ListItem key={i} title={item.name} avatar={{uri: item.base64Icon}} // optional: avatarStyle={{width: 50, height: 50}} /> )) } </List> 

到目前为止，这一切都非常明显，一旦被理解......对不起，问这个愚蠢的问题;-)

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

编辑：PR已合并，并且文档更改了关于带有“data：”uri架构的图像，同时指定大小的需要是公开的！ 在以下位置搜索“data：”：
http://facebook.github.io/react-native/docs/images.html
http://facebook.github.io/react-native/docs/image.html