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

Question

我有一个JSON，里面有很多提供者，每个人都有一个id和一个图像。根据id，我想显示他们相应的标志。

基本上，我想做的是：

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

这是我作为coches:导入的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"的字符串