react-native:从base64字符串为iOS和Android创建图像(在react-native-elements列表中)

Question

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

它必须同时适用于iOS和Android。

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

到目前为止我所尝试的：

• 使用静态addImageFromBase64（base64ImageData，成功，失败）参见此处
  • 仅适用于iOS（@platform-iOS）

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

  < li >该讨论中提到的PR后来关闭了，但不知何故，似乎仍引入了“data:”方案，请参见RCTConvert.m，尽管它未记录在图像中 < li >但是它似乎只在iOS上实现(只在。m文件) < li >查看Android的图像，似乎渲染被委托给本机端，这可能是它没有在Android上实现的原因(至少它在Android上对我不起作用)。

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

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

Answer 1

事实上，我一直在结合一些不同的缺陷，还添加了React原生元素以增加混乱…
感谢martwetzels用高度/宽度提示引导我朝着正确的方向前进。

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

>

对于 React Native

• 如果在中使用'data:'

所以这是 React Native 的一个工作示例

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

对于反应原生元素中的图像

• 只有avataprop会使用url-leftIconprop用于包含库中的图标，例如材料-仅限图标-或用于单独的React Native元素
• avataprop可以有一个可选的单独avatar样式，但默认情况下会自动缩放图像
• 带有嵌套的leftIcon道具

反应原生元素的工作示例

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

反应原生元素的工作示例

<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文档提出一些PRs。

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