Acabo de empezar con React-Native y tengo algunos problemas para requerir una imagen estática.
Aquí está el código muy básico que tengo hasta ahora:
'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, Image, View, } = React; var buzz = React.createClass({ render: function() { return ( <View style={styles.container}> <Image source={require('image!bg')} style={styles.bg}> <Text style={styles.welcome}> Welcome to Buzz! iOS interface to </Text> <Text style={styles.welcomeHeader}>Charityware</Text> </Image> </View> ); } }); var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'transparent' }, welcomeHeader: { fontWeight: '600', fontFamily: 'Helvetica', color: '#fff', fontSize: 50, alignSelf: 'center' }, bg: { width: 400, height: 300, alignSelf: 'auto', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', }, }); AppRegistry.registerComponent('buzz', () => buzz);
El área principal del problema es:
<Image source={require('image!bg')} style={styles.bg}> <Text style={styles.welcome}> Welcome to Buzz! iOS interface to </Text> <Text style={styles.welcomeHeader}>Charityware</Text> </Image>
Al empaquetar mi aplicación y ejecutarla, aparece un error de procesamiento:
Entiendo que necesita agregar imágenes en xcode como un conjunto de imágenes para que la llamada require
encuentre la imagen y haya agregado un conjunto de imágenes para ese fin:
...Pero fue en vano. ¿Alguien tiene alguna idea? He leído los documentos y parece que estoy haciendo esto de la manera prescrita. ¡Gracias!
Desde el lanzamiento de React Native 0.14
, el manejo de imágenes se ha normalizado para iOS y Android y ahora es diferente. No pude encontrar ninguna documentación, excepto esta nota de confirmación muy clara en Github: Document new asset system .
Solo hay una captura de pantalla de la documentación propuesta:
Actualización: ahora hay un enlace para la documentación real: https://facebook.github.io/react-native/docs/images.html
Tuve un problema similar, luego cambié el nombre de los archivos de imagen en el sistema de archivos en los directorios Images.xcassets
del proyecto xcode con sufijos y mayúsculas para que coincidan con la imagen que estoy cargando.
Por ejemplo, si source={require('image!Villagers')}
requería los archivos de imagen nombrados precisamente como Villagers.png
, Villagers@2x.png
y Villagers@3x.png
. Si la parte '@3x' del nombre de archivo no estuviera allí, no se encontraría la imagen.
¿Qué versión de React Native estás ejecutando? Hubo un problema con el empaquetador, relacionado con eso, que se ha solucionado.
Si ese es el caso, puede actualizar o ejecutar el servidor de desarrollo con:
node_modules/react-native/packager/packager.sh --assetRoots path/to/Images.xcassets