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

Question

我正在尝试通过 REST 调用在数据库中的动态（react-native-elements）列表中显示图标，该调用将图标作为 base64 编码字符串（即此处使用 jHipster/swagger 完成）。

它必须适用于 iOS 和 Android。

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

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

1. 使用static addImageFromBase64(base64ImageData, success, failure)see here
   • 仅适用于 iOS (@platform ios)
2. 使用 'data:' uri 方案，如本例（如讨论 here）：

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

• PR mentioned in that discussion 稍后关闭，但不知何故，似乎仍然引入了“数据：”方案，请参阅RCTConvert.m，尽管它没有记录在Image
• 但它似乎只针对 iOS 实现（仅在 .m 文件中）
• 看看Image for Android，似乎渲染是委托给本机端的，这可能是它没有在 Android 上实现的原因（至少它在 Android 中不适合我）。

那么有什么好的方法可以将 base64 图像字符串导入 Android react-native 应用程序吗？

或者是否有一个好的做法或库可以以完全不同的方式解决这个问题（通过 REST API 从数据库动态获取图标到 react-native 应用程序）？

Answer 1

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

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

1. 对于 React Native <Image>:

   • 如果您在<Image> 中使用'data:'，至少您必须在样式中提供宽度和高度
   • for Network images in the Guide for Images 提到了这一点：
     与静态资源不同，您需要手动指定图像的尺寸。
     
   • 但不幸的是，它不在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 属性仅用于包含库中的图标，例如 material-icons - 或用于单独的 React Native 元素
   • avatar 属性 可以有一个可选的单独的 avatarStyle，但默认情况下会自动缩放图像
   • 带有嵌套<Image> 的leftIcon 属性将再次需要图片出现的样式，至少具有宽度和高度

   React Native Elements <List> 的一个工作示例，带有 leftIcon 属性和 <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>
   

   React Native Elements <List> 和 avatar 属性的工作示例（没有 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 架构的图像的文档更改以及指定大小的需要同时是公开的！在以下位置搜索“数据：”：
http://facebook.github.io/react-native/docs/images.html
http://facebook.github.io/react-native/docs/image.html