Cargar activos dinámicos en react-native

Cargar activos dinámicos en react-native

¿Cómo puedo lograr esto en react-native?

require("../images/vehicles/" + this.state.proccessedFirstData.make + ".png")

make es la propiedad del objeto a la que necesito acceder dinámicamente, he estado buscando y no encuentro ninguna solución

Yo también probé

const IMAGE = require("../images/vehicles/" + this.state.proccessedFirstData.make + ".png") y no funciona

Mostrar la mejor respuesta

No puede concatenar variables en la ruta requerida. En realidad, puede, pero no se recomienda, ya que puede reducir el rendimiento.

En JS, las instrucciones require se resuelven en el momento del paquete (cuando se calcula el paquete JS). Por lo tanto, no se admite poner una expresión variable como argumento para require.

En caso de requerir recursos es aún más complicado. Cuando tenga require('./someimage.png'), el empaquetador de React Native ubicará la imagen requerida y luego se empaquetará junto con la aplicación para que pueda usarse como un recurso "estático" cuando su aplicación se esté ejecutando (de hecho, en desarrollo). modo no incluirá la imagen con su aplicación, sino que la imagen se entregará desde el servidor, pero esto no importa en su caso).

Si desea utilizar una imagen aleatoria como un recurso estático, debe indicarle a su aplicación que agrupe esa imagen. Puedes hacerlo de varias maneras:

1) Agréguelo como un activo estático de su aplicación, luego haga referencia a él con <Image src={{uri:'name_of_the_image_in_assets.png'}}/> (aquí es cómo puede agregarlo a la aplicación iOS nativa)

2) Requerir todas las imágenes por adelantado de forma estática. Algo en forma de:

var randomImages = [
    require('./image1.png'),
    require('./image2.png'),
    require('./image3.png'),
    ...
];

Entonces en tu código puedes hacer:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/>

3) Usar imagen de red con <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

ref de este enlace, gracias @kzzzf

Recibo un error: require espera exactamente 1 argumento literal de cadena

lo siento, no estaba funcionando @NtiyisoRikhotso, actualicé mi respuesta, verifíquela

El paquete RN es estático, por lo que debe importar todos los recursos en tiempo de compilación.

Todavía puedes tener una carga semidinámica:

const car1 = require('<path>')
const car2 = require('<path>')
const cars = {car1, car2}

<image source={cars[this.state.car]}>