javascript - cache - Problema que requiere módulo de imagen en React Native
react native image cache (7)
Estoy comenzando con React-Native y estoy teniendo 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 problemática principal 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 renderizado:
Entiendo que debe agregar imágenes en xcode como un conjunto de imágenes para que la llamada require encontrar la imagen y haya agregado una imagen configurada 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!
NOTA: Se requiere compilación de aplicaciones para nuevos recursos. Cada vez que agregue un nuevo recurso a Images.xcassets, necesitará volver a compilar su aplicación a través de XCode antes de poder usarlo; una recarga desde adentro del simulador no es suficiente. (de React Native docs https://facebook.github.io/react-native/docs/image.html#content )
También asegúrese de reiniciar el paquete. Eso resolvió el problema para mí.
¿Qué versión de React Native está ejecutando? Hubo un problema con el empaquetador, relacionado con eso, que se resolvió.
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
Desde la versión 0.14 React Native, el manejo de imágenes se ha normalizado para iOS y Android, y ahora es diferente. No pude encontrar ninguna documentación a excepción de esta nota de confirmación muy clara sobre Github: Documentar el nuevo sistema de activos .
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
Esta pregunta ya ha sido respondida, pero si usa React Native en Android, es posible que tenga el mismo problema. Para mí, la solución estaba usando source={{ uri: "google", isStatic: true }} lugar de source={required(''./bg.png'')} .
Simplemente no olvide agregar sus imágenes en la carpeta src/main/res/drawable .
Para imágenes estáticas, debe proporcionar la ruta como:
<Image source={require(''./images/back.png'')}
style= {{width:25, height:25, marginLeft:12, padding:12}}/>
Esto funcionó para mí, para la imagen almacenada en la carpeta de imágenes del directorio del proyecto:
Puede facilitar la referencia de las imágenes haciendo el archivo package.json en su carpeta de activos.
Estructura de la carpeta del proyecto
Y puedes llamarlo por este código.
<Image
source={require(''assets/img/avatar.png'')}
style={styles.itemAvatar}
resizeMode={''cover''}
/>
Tuve un problema similar, luego renombré los archivos de imagen en el sistema de archivos bajo los directorios Images.xcassets del proyecto xcode con sufijos y mayúsculas para que coincida con la imagen que estoy cargando.
Por ejemplo, si source={require(''image!Villagers'')} requiere los archivos de imagen nombrados precisamente como Villagers.png , [email protected] y [email protected] . Si la parte ''@ 3x'' del nombre de archivo no estaba allí, la imagen no se encontraría.