代码之家 › 专栏 › 技术社区 › Anjali

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

react-native reactjs

Anjali · 技术社区 · 6 年前

 <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>

 {

        "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')"

似乎,它正在阅读空白图像:下面是屏幕截图:

下面的代码正在运行,但在本例中,我编写的是一个常量图像,而不是从json文件读取。

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

我的代码位于一个名为Modules的目录中,该目录位于project目录中。我的项目名是test,我的Json文件位于一个名为Reducers的目录中,Reducers也位于project目录中,我的映像位于一个名为images的目录中,images也位于project目录中。下面是路径:

c:\MobileApplication\test\Modules\ServiceListDetails.js
c:\MobileApplication\test\reducers\ServiceDetails.json
c:\MobileApplication\test\images\CAC.png

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

},

任何帮助都将不胜感激。

2 回复 | 直到 6 年前

Gaspar Teixeira 6 年前

确保在json文件中图像的名称是正确的。例如,.png代替.png,然后您需要这样的内容:

c:\MobileApplication\test\Modules\Icons.js
exports.CAC = require('../assets/images/CAC.png');
exports.CAD = require('../assets/images/CAD.png');
exports.CAE = require('../assets/images/CAE.png');

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

c:\MobileApplication\test\Modules\ServiceListDetails.js
import Icons from './Icons';
import resources from './ServiceDetails.json';

最后:

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

    "image": "CAC"
}

   "image": "CAD"
}

 "image": "CAE"
}

Masoud Tavakkoli 6 年前

docs 你可以用两种方法来做。

使用静态图像,但需要对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}/>