Как выбрать источник изображения из объекта на React-Native - PullRequest
Новая
       18

Как выбрать источник изображения из объекта на React-Native

0 голосов
/ 25 марта 2020

У меня есть JSON с большим количеством провайдеров, где у каждого есть идентификатор и изображение. В зависимости от идентификатора, я хочу показать их соответствующие lo go.

По сути, я хочу сделать следующее: 

<View style={styles.logo}>
   <Image style={styles.imagen} source={proveedores[proveedor]} />
</View>

Это JSON, который я импортирую as coches: 

[
    {"id":9, "proveedor": "Avis", "img":"Avis_logo.png"},
    {"id":11, "proveedor": "Atesa", "img":"atesa_logo.png"},
    {"id":17, "proveedor": "Hertz", "img":"hertz.png" },
    {"id":18, "proveedor": "Europcar", "img":"Europcar.png" },
    {"id":38, "proveedor": "SixtRentaCar", "img":"sixt.png" },
    {"id":106, "proveedor": "AutosXoroi", "img":"alquiler_de_coches.png" },
    {"id":111, "proveedor": "Drivania", "img":"drivania.png"},
    {"id":214, "proveedor": "CentauroRentaCar",  "img":"centauro.png" },
    {"id":1406, "proveedor": "GT1Rent", "img":"alquiler_de_coches.png" },
    {"id":2827, "proveedor": "AsionTravel", "img":"alquiler_de_coches.png"},
    {"id":3931, "proveedor": "Click&Rent", "img":"alquiler_de_coches.png" },
    {"id":3980, "proveedor": "LaSavinaCarsMotors", "img":"alquiler_de_coches.png" },
    {"id":6029, "proveedor": "OneCarsValencia", "img":"alquiler_de_coches.png" },
    {"id":6129, "proveedor": "FlexibleAutos", "img":"alquiler_de_coches.png" },
    {"id":6134, "proveedor": "AutoArandino", "img":"alquiler_de_coches.png" },
    {"id":6249, "proveedor": "Rentikar", "img":"alquiler_de_coches.png" },
    {"id":6285, "proveedor": "Transferextra", "img":"alquiler_de_coches.png" },
    {"id":6432, "proveedor": "SCMelaniaRentaCar", "img":"alquiler_de_coches.png" },
    {"id":6579, "proveedor": "GoldcarSpain", "img":"alquiler_de_coches.png" },
    {"id":6662, "proveedor": "Telefurgo", "img":"alquiler_de_coches.png" }
]

Это то, что я пытался: 

import coches from "../../assets/json/coches.json";

this.state={
   coches: coches
}

const proveedores = {
            Avis: require("../../assets/images/proveedores/Avis_logo.png"),
            Atesa: require("../../assets/images/proveedores/atesa_logo.png"),
            Hertz: require("../../assets/images/proveedores/hertz.png"),
            Europcar: require("../../assets/images/proveedores/Europcar.png"),
            SixtRentaCar: require("../../assets/images/proveedores/sixt.png"),
            AutosXoroi: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Drivania: require("../../assets/images/proveedores/drivania.png"),
            CentauroRentaCar: require("../../assets/images/proveedores/centauro.png"),
            GT1Rent: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            AsionTravel: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Click: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            LaSavinaCarsMotors: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            OneCarsValencia: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            FlexibleAutos: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            AutoArandino: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Rentikar: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Transferextra: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            SCMelaniaRentaCar: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            GoldcarSpain: require("../../assets/images/proveedores/alquiler_de_coches.png"),
            Telefurgo: require("../../assets/images/proveedores/alquiler_de_coches.png") 
        }

        const codigoRent = this.props.idProveedor; //this is 38 = SixRentaCar
        let proveedor = "";

        this.state.coches.forEach((agencia) => {
            if (agencia.id == codigoRent) { //if agencia.id=38 == codigoRent=38
                proveedor = agencia.proveedor; //Here proveedor is SixtRentaCar
            }
        });

<View style={styles.logo}>
   <Image style={styles.imagen} source={proveedores[proveedor]} />
</View>

Дело в том, что если я устанавливаю Proveedor как Proveedor = "SixtRentaCar", я получаю lo go.

Как я могу это сделать?

1 Ответ

1 голос
/ 25 марта 2020

Я думаю, вам, возможно, придется сделать что-то вроде этого: 

import Avis_logo from '../../assets/images/proveedores/Avis_logo.png';
import atesa_logo from '../../assets/images/proveedores/atesa_logo.png';
...
import alquiler_de_coches from '../../assets/images/proveedores/alquiler_de_coches.png';

const files = {
   Avis_logo,
   atesa_logo,
   ...
   alquiler_de_coches
};

export default files;

И затем в другом файле вы можете выполнить динамический c импорт из этого 

import imgFiles from '../imgFiles.js';

... 
<img src={imgFiles[variable]} />

Где variable это строка типа 'Avis_lo go'

...