React Native: módulo de requisito de imagen que utiliza 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')} />
Recibo el error:
Requiere módulo desconocido "image!avatar". Si está seguro de que el módulo está ahí, 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?
Esto se trata en la documentación en la sección " Recursos estáticos ":
La única forma permitida de hacer referencia a una imagen en el paquete es escribir literalmente require('image!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 debes recordar agregar tus imágenes a un paquete xcassets en tu aplicación en Xcode, aunque, según tu comentario, parece que ya lo has hecho.
http://facebook.github.io/react-native/docs/image.html#adding-static-resources-to-your-app-using-images-xcassets
RELEVANTE SI TIENE IMÁGENES CONOCIDAS (URLS):
La forma en que me abrí paso 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 simplemente hice mi renderizado 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 eficaz, pero definitivamente es una solución alternativa.
¡Espero eso ayude!
Esto funcionó para mí:
Creé un componente de imagen personalizado que admite un valor booleano para verificar si la imagen proviene 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)
Solo estoy enviando el conjunto require('./images/logo.png')como accesorio. ¡Funciona!
Si está buscando una manera de crear una lista recorriendo una matriz JSON de sus imágenes y descripciones, por ejemplo, esto funcionará para usted.
- Cree un archivo (para contener nuestra base de datos JSON), por ejemplo, ProfilesDB.js:
const Profiles = [
{
id: '1',
name: 'Peter Parker',
src: require('../images/user1.png'),
age: '70',
},
{
id: '2',
name: 'Barack Obama',
src: require('../images/user2.png'),
age: '19',
},
{
id: '3',
name: 'Hilary Clinton',
src: require('../images/user3.png'),
age: '50',
},
];
export default Profiles;- Luego importe los datos en nuestro componente y recorra la lista usando una FlatList:
import Profiles from './ProfilesDB.js';
<FlatList
data={Profiles}
keyExtractor={(item, index) => item.id}
renderItem={({item}) => (
<View>
<Image source={item.src} />
<Text>{item.name}</Text>
</View>
)}
/>¡Buena suerte!
