javascript - cache - Problema que requiere módulo de imagen en React Native

react native image cache

Question

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!

Answer 1

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í.

Answer 2

¿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

https://github.com/facebook/react-native/issues/282

Answer 3

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

Answer 4

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 .

Answer 5

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:

Answer 6

Puede facilitar la referencia de las imágenes haciendo el archivo package.json en su carpeta de activos.

Estructura de la carpeta del proyecto

package.json

Y puedes llamarlo por este código.

<Image 
   source={require(''assets/img/avatar.png'')} 
   style={styles.itemAvatar}
   resizeMode={''cover''}
/>

Answer 7

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.