Мне нужно поместить изображения из файла JSON на мою страницу React Native. Ниже мой код:

 <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, а reducer также находится в каталоге проекта, а мои изображения находятся в каталоге с именем images, который также находится в каталоге проекта. ниже путь:

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

Мой проект называется test. ниже мой стиль imageView

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

},

Любая помощь будет оценена.

2
Anjali 14 Сен 2018 в 01:30

2 ответа

Лучший ответ

Убедитесь, что имя вашего изображения правильное в вашем 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}/>

Теперь вам нужно изменить o json на нужный код.

    "image": "CAC"
}

Или же

   "image": "CAD"
}

Или же

 "image": "CAE"
}
2
Gaspar Teixeira 14 Сен 2018 в 21:40

С помощью docs Facebook это можно сделать двумя способами.

< Сильный > Во-первых :

С помощью СТАТИЧЕСКИХ изображений, которые вы использовали раньше, но некоторые изменения необходимо внести в ваш 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}/>

< Сильный > UPDATE :

Для этого вопроса вы можете это сделать.

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" : "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}/>
0
Masoud Tavakkoli 17 Сен 2018 в 09:13