在原生应用程序中动态显示来自Firebase的图像

问题描述：

我已经从Firebase提取数据并显示它们。现在我需要显示图像。在火力数据库我有同样的结构如下图在原生应用程序中动态显示来自Firebase的图像

的形象和我有一个包含有类似的一个例子“Carl.png” 我提取照片中的内容完全相同的名称的所有图片我的项目下的文件夹并与路径的其余部分结合使用：“Myproject/img /”+ photo +“。png”，并在屏幕上正确显示。但当我试图影响它的形象我得到的错误。这里是我试过

<Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}}> </Image>

的代码，我得到这个，如果我试图把在<Image style={{width: 50, height: 50}} source={{ uri: <Text> this.props.item.imageName </Text> }}> </Image>我得到这个，如果我把这个代码source={require(this.props.item.imageName)}这里是我得到：U nknown命名模块

答

尝试 <Image style={{width: 50, height: 50}} source={{uri : (this.props.item.imageName)}} />

你得开&关闭标记之间的空间。

嗨，谢谢你..我试过你的解决方案，但我什么也没有在屏幕上，我甚至没有得到一个错误..但在控制台上，我得到这个：找不到名为projectName/img/photos/Carl.png的图片..任何想法 – user3521011

@ user3521011您确定您使用的是可从互联网访问的完整绝对网址吗？ – nehvaleem

不，实际上它不是来自互联网：它是我项目下的一个文件夹，其中包含Firebase数据库中所有具有完全相同名称的照片。但是，每一次，我从数据库中获得一个项目，我还提取它的照片（如上例中的Carl），然后将其与（我的项目下的路径）+ photo +（.png） – user3521011

答

尝试使用需要，因为你是从本地存储加载它加载它，所以你的源属性变为：源= {要求（“./ IMG /‘+照片+’巴”）}

连接起来谢谢.. * *我只是现在尝试，我得到未知的命名模块'projectName/img/photos/Carl.png'** ..是否有任何其他解决方案？ – user3521011

答

实际，React native不支持动态图像，即使它们存储在本地，您只需要使其名称动态变化即可。所以，我不得不使用的唯一解决方案是使用一个巨大的开关情况下，这里的代码我使用：

 switch (item.name) { 
       case 'carl': 
        return (
         <Image source{require('pathUnderProject/carl.png')}/> 
        ); 
... 
       default: 
        return (
         <View > 
          <Text>{'Null'}</Text> 
         </View> 
        );

我知道这是不是最好的解决办法，但至少我敢肯定它的正常工作它不会在生产环境中破坏

在原生应用程序中动态显示来自Firebase的图像

相关推荐