如何从 React-Native 上的对象中选择图像源

Question

我有一个 JSON 有很多提供者，每个人都有一个 ID 和一个图像。根据id，我想展示他们对应的logo。

基本上，我想做的是：

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

这是我作为车厢导入的 JSON：

[
    {"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" 我确实得到了徽标。

我该怎么做？

Answer 1

我想你可能需要这样做：

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;

然后在另一个文件中，您可以从该文件进行动态导入

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

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

其中 variable 是一个类似于 'Avis_logo'

的字符串

如何从 React-Native 上的对象中选择图像源

How to chose image source from an object on React-Native

javascript

image

require

react-native