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

Question

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

它必须适用于 iOS 和 Android。

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

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

使用 static addImageFromBase64(base64ImageData, success, failure) see here
- 仅适用于 iOS (@platform ios)
像这个例子一样使用 'data:' uri 方案（如所讨论）：

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

PR mentioned in that discussion was closed later, but somehow it seems that 'data:' scheme still was introduced, see RCTConvert.m, although it is not documented in Image
但它似乎只为 iOS 实现（仅在 .m 文件中）
看Image for Android，好像渲染委托给了原生端，这可能是Android没有实现的原因（至少对我来说是行不通的） Android).

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

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

Answer 1

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

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

对于 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}}/>
```
对于 react-native-elements <List>
中的图像
- 只有 avatar 道具会采用 url - leftIcon 道具适用于包含的库中的图标，例如 material-仅适用于图标 - 或者用于单独的反应本机元素
- avatar 道具可以有一个可选的单独的 avatarStyle，但默认情况下会自动缩放图像
- 具有嵌套 <Image> 的 leftIcon 道具将再次需要图片显示的样式，至少宽度和高度
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>
```
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 模式的图像的文档更改同时需要指定大小 public！在以下位置搜索 "data:"：
http://facebook.github.io/react-native/docs/images.html
http://facebook.github.io/react-native/docs/image.html

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

react-native: creating image from base64 string for iOS and Android (in react-native-elements list)

base64

image

react-native