0
714
VistasReact Native - Módulo de solicitud de imagen usando nombres dinámicos
Actualmente estoy creando una aplicación de prueba usando React Native. El módulo Imagen hasta ahora ha estado funcionando bien.
Por ejemplo, si tuviera una imagen llamada avatar , el siguiente fragmento de código funciona bien.
<Image source={require('image!avatar')} />Pero si lo cambio a una cadena dinámica, obtengo
<Image source={require('image!' + 'avatar')} />me sale el error:
Requiere módulo desconocido "image!avatar". Si está seguro de que el módulo está allí, intente reiniciar el empaquetador.
Obviamente, este es un ejemplo artificial, pero los nombres de imágenes dinámicas son importantes. ¿React Native no admite nombres de imágenes dinámicas?
3 Respuestas
Responde la pregunta0
Esto se trata en la documentación en la sección " Recursos estáticos ":
La única forma permitida de referirse a una imagen en el paquete es escribir literalmente require('imagen!nombre-del-activo') en la fuente.
// GOOD <Image source={require('image!my-icon')} /> // BAD var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive'; <Image source={require('image!' + icon)} /> // GOOD var icon = this.props.active ? require('image!my-icon-active') : require('image!my-icon-inactive'); <Image source={icon} />Sin embargo, también debe recordar agregar sus imágenes a un paquete xcassets en su aplicación en Xcode, aunque parece por su comentario que ya lo ha hecho.
0
Esto funcionó para mí:
Creé un componente de imagen personalizado que toma un valor booleano para verificar si la imagen es de la web o se pasa desde una carpeta local.
// In index.ios.js after importing the component <CustomImage fromWeb={false} imageName={require('./images/logo.png')}/> // In CustomImage.js which is my image component <Image style={styles.image} source={this.props.imageName} />Si ve el código, en lugar de usar uno de estos:
// NOTE: Neither of these will work source={require('../images/'+imageName)} var imageName = require('../images/'+imageName) Estoy enviando todo el require('./images/logo.png') como accesorio. ¡Funciona!
0
RELEVANTE SI CONOCES IMÁGENES (URLS):
La forma en que me abrí camino a través de este problema:
Creé un archivo con un objeto que almacenaba la imagen y el nombre de la imagen:
export const ANIMAL_IMAGES = { dog: { imgName: 'Dog', uri: require('path/to/local/image') }, cat: { imgName: 'Cat on a Boat', uri: require('path/to/local/image') } }Luego importé el objeto al componente donde quiero usarlo y solo hice mi representación condicional así:
import { ANIMAL_IMAGES } from 'path/to/images/object'; let imgSource = null; if (condition === 'cat') { imgSource = ANIMAL_IMAGES.cat.uri; } <Image source={imgSource} />Sé que no es la forma más eficiente, pero definitivamente es una solución.
¡Espero eso ayude!