Cómo cargar imágenes de res / drawable-folder en ReactNative-App?

Me gustaría mostrar imágenes estáticas de res / drawable-folder en una ReactNative-App. Sin embargo, no se muestra nada.

Tengo la siguiente estructura de carpetas en la subcarpeta android:

React Native Duplicate nombre del módulo
Reaccionar error de android nativo: no se puede encontrar el símbolo
En una aplicación React Native JavaScript, ¿por qué cambiaría el comportamiento de Android GC si creaba una variable temporal en lugar de devolver un valor directamente?
TypeError: undefined no es una función (evaluando 'remoteModules.forEach')
React Native - java.lang.RuntimeException: ubicación del SDK no encontrada. Defina la ubicación con sdk.dir en local.properties

macbook:CompanyApp hagen$ tree android/app/src/main/res/ android/app/src/main/res/ ├── drawable │  ├── a1456.jpg │  └── a1457.jpg ├── mipmap-hdpi │  └── ic_launcher.png ├── mipmap-mdpi │  └── ic_launcher.png ├── mipmap-xhdpi │  └── ic_launcher.png ├── mipmap-xxhdpi │  └── ic_launcher.png └── values ├── strings.xml └── styles.xml 6 directories, 8 files

Como se menciona en la documentación, intento cargar los archivos de imagen de drawable-folder con el código siguiente:

 <Image source={{uri: 'a1456'}} style={{width: 140, height: 140}} />

También intenté el nombre de archivo junto con la extensión:

 <Image source={{uri: 'a1456.jpg'}} style={{width: 140, height: 140}} />

y también:

 <Image source={require('image!a1456')} style={{width: 140, height: 140, backgroundColor: 'yellow'}} />

Y he intentado la subcarpeta:

 <Image source={{uri: 'drawable/a1456.jpg'}} style={{width: 140, height: 140}} />

No se mostrará ninguna imagen. Usar una instrucción require dentro de la fuente de la imagen para una imagen local en mi carpeta actual por ejemplo está funcionando bien.

Pero estoy buscando una solución para consumir las imágenes dibujables como dentro de una aplicación auténtica nativa de Android.

ACTUALIZAR

Acabo de publicar un proyecto de ejemplo en github: https://github.com/itinance/testdrawable

Es una aplicación RN estándar con "reaccionar-init nativo" y acaba de añadir una imagen para mostrar en drawable-carpeta (android sólo).

¿Puede alguien verlo y decirme qué estoy haciendo mal?

Ejemplo de estructura de proyecto: mi nombre de aplicación es MyProject

 Myproject ├── ios ├── android ├── resource //folder for static content └── image.png

Para usar la imagen que reside en el directorio de recursos

 <Image style={{width: 16, height: 16}} source={require('./resource/image.png') } />

¡Espero que ayude!

Finalmente lo conseguí: la etiqueta <image> necesita argumentos concretos de "width" y "height" como atributos, no sólo como parámetro de estilo.

Con esto en mente, ambas declaraciones funcionarán perfectamente:

  <Image width={200} height={267} source={{uri: 'img_3665'}} style={{width: 200, height: 267}} /> <Image width={200} height={267} source={require('image!img_3665')} style={{width: 200, height: 267}} />

También estoy tratando de hacer esto. Estoy usando RN 0.47.1 – razón que quiero esto, es porque quiero tener la pantalla de "carga" y mi página de destino tienen una imagen en el mismo lugar, así que quiero que la imagen se cargue al instante.

Re carga instantánea: Añadir el recurso dentro de la carpeta en mi js paquetes de directorios, está tomando tiempo para cargarlo. Así que pensé que si lo pongo en "res / drawable" (para Android) ya debería estar cargado, ya que acaba de utilizar para el chapoteo. He encontrado esto es cierto, sin embargo, hay un parpadeo, estoy tratando de evitar ese parpadeo.

Sin embargo aquí está la documentación oficial sobre cómo cargar imágenes locales en Android e iOS – facebook.github.io :: React Native – Imágenes de recursos de la aplicación híbrida

Si está creando una aplicación híbrida (algunas UI en React Native, algunas UI en código de plataforma) todavía puede usar imágenes que ya están incluidas en la aplicación.

Para las imágenes incluidas en los catálogos de activos de Xcode o en la carpeta dibujable de Android, utilice el nombre de la imagen sin la extensión:
 <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} /> 
Para las imágenes de la carpeta de activos de Android, utilice el recurso: / scheme:
 <Image source={{uri: 'asset:/app_icon.png'}} style={{width: 40, height: 40}} /> 
Estos enfoques no proporcionan controles de seguridad. Depende de usted garantizar que esas imágenes están disponibles en la aplicación. También hay que especificar las dimensiones de la imagen manualmente.

Así que sí, su descubrimiento de tener que establecer el ancho / altura es cierto. En el último RN sin embargo (estoy usando 0.47.1) no podemos fijar los apoyos del ancho / de la altura, él tiene que ser hecho vía style .