如何将图像从JSON文件放到React Native Js页面

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将图像从JSON文件放到React Native Js页面相关的知识,希望对你有一定的参考价值。

我需要将JSON文件中的图像放到我的React Native Page中。以下是我的代码:

 <View style={{ flexDirection: 'row', alignItems:'center' }}>
                       <Image source={{item.image}} style = {styles.imageView}/>
                 <View style={{  flex: 1, alignItems: "center"}}>
                        <Text  style={styles.Address1}>{item.addr} </Text>
                </View>
            </View>

我可以从我的JSOn文件中读取其他内容,例如item.addr来自json文件,但不知道如何读取图像。我试着写这样的json文件:

 {

        "addr": "124 test drive, Ring road",
        "phone": "(951)-955-6200",
        "LatL":"33.977880",
        "Long2":"-117.373423",
        "cLat": "33.931989",
        "cLong": "-117.409222",
        "Online": "https://www.test.org",
         "image" : "require("CAC.png")"
     }

我也尝试在我的JSON文件中编写如下图像

"image" : "require('../images/CAC.png')"

看来,它正在读取空白图像:下面是屏幕截图:

enter image description here

下面的代码是有效的,但在这种情况下,我正在编写一个常量图像,而不是从json文件中读取。

 <Image source={require('../images/CAC.png')} style = {styles.imageView}/>

我的代码位于名为Modules的目录中,该目录位于项目目录目录中。我的项目名称是test,我的Json文件位于名为Reducers的目录中,reducers也驻留在项目目录中,我的图像位于名为images的目录中,该目录也驻留在项目目录中。以下是路径:

c:MobileApplication	estModulesServiceListDetails.js
c:MobileApplication	est
educersServiceDetails.json
c:MobileApplication	estimagesCAC.png

我的项目名称是test。下面是我的imageView风格

imageView:{
width:'30%',
height:100,
margin:7,
borderRadius: 7

},

任何帮助将不胜感激。

答案

确保您的图像名称在json文件中正确无误。例如,.png而不是.PNG,然后你需要这样的东西:

首先创建一个组件来加载你的图标:

c:MobileApplication	estModulesIcons.js
exports.CAC = require('../assets/images/CAC.png');
exports.CAD = require('../assets/images/CAD.png');
exports.CAE = require('../assets/images/CAE.png'); 

其次,在组件中导入图标:

c:MobileApplication	estModulesServiceListDetails.js
import Icons from './Icons';
import resources from './ServiceDetails.json';

最后:

  <Image source={Icons[resources.image]} style = {styles.imageView}/>

现在你必须用你想要的代码改变o json。

    "image": "CAC"
}

要么

   "image": "CAD"
}

要么

 "image": "CAE"
}
另一答案

通过Facebook docs你可以通过两种方法来做到这一点。

第一:

您之前使用的STATIC图像,但JSON中需要进行一些更改。像这样重写你的对象

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : require("CAC.png") // <-- This line
}

并使用它像这样

<Image source={item.image} style = {styles.imageView}/>

第二:如果你从外部服务器获得这个JSON,你也应该从服务器获取图像。

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : "https://example.com/path/to/your/image.png" // <-- This line
}

使用它像这样

<Image source={{uri: item.image}} style = {styles.imageView}/>

更新:

对于这个问题,你可以这样做。

杰森是这样的

{
    "addr": "124 test drive, Ring road",
    "phone": "(951)-955-6200",
    "LatL":"33.977880",
    "Long2":"-117.373423",
    "cLat": "33.931989",
    "cLong": "-117.409222",
    "Online": "https://www.test.org",
    "image" : "CAD" // <-- This line
}

而且功能

getImage = (image) => {

    switch (image) {
        case "CAD":
            return require("CAD.png")
            break;
        case "CAD2":
            return require("CAD2.png")
            break;
        case "CAD3":
            return require("CAD3.png")
            break;

        default:
            return require("CAD4.png");
            break;
    }
}

<Image source={this.getImage(item.image)} style = {styles.imageView}/>

以上是关于如何将图像从JSON文件放到React Native Js页面的主要内容,如果未能解决你的问题,请参考以下文章

如何将后端(嵌套)文件中的 multer 图像放到我的前端(反应)上?

如何从 React JS 上传和获取图像到 Json-server?

尝试从 create-react-app 中的 .json 文件中读取图像

在 react-native 中迭代 JSON 数组

从 JSON 文件动态加载图像位置 - (找不到模块...) React, Next.js

如何将参数从 React-Native 发送到 Native