react-native - icon - react navigation

Use<Imagen> con un archivo local

Question

La documentación dice que la única manera de hacer referencia a una imagen estática es usar require.

Pero no estoy seguro de dónde reacciona esperar tener esas imágenes. Los ejemplos no tienen ningún dominio, por lo que parece que tienes que ir a Xcode y agregarlos a Images.xcassets, pero eso no funcionó para mí.

Answer 1

Debe agregar a la propiedad de origen un objeto con una propiedad llamada "uri" donde puede especificar la ruta de su imagen como puede ver en el siguiente ejemplo:

<Image style={styles.image} source={{uri: "http://www.mysyte.com/myimage.jpg"}} />

recuerde luego establecer el ancho y alto a través de la propiedad de estilo:

var styles = StyleSheet.create({
image:{
width: 360,
height: 40,
}
});

Answer 2

Desde la aplicación de ejemplo UIExplorer:

¡Los activos estáticos deberían ser requeridos por el prefijo con la image! y se encuentran en el paquete de la aplicación.

Así que así:

render: function() {
return (
<View style={styles.horizontal}>
<Image source={require(''image!uie_thumb_normal'')} style={styles.icon} />
<Image source={require(''image!uie_thumb_selected'')} style={styles.icon} />
<Image source={require(''image!uie_comment_normal'')} style={styles.icon} />
<Image source={require(''image!uie_comment_highlighted'')} style={styles.icon} />
</View>
);
}

Answer 3

Estaba teniendo problemas con reaccionar-native-navigation, creé mi propio componente de encabezado y luego inserté una imagen, como logotipo, a la izquierda antes del título, luego cuando estaba activando la navegación a otra pantalla y luego de regreso, el logotipo se cargaba nuevamente , con un tiempo de espera cercano a 1s, mi archivo era local. Mi solución :

Logo.json

{"file" : "base64 big string"}

App.js

import Logo from ''.../Logo.json''
...
<Image source:{{uri:Logo.file}} />

Answer 4

Esto de https://github.com/facebook/react-native/issues/282 funcionó para mí:

adekbadek comentó el 11 de noviembre de 2015 Debe mencionarse que no tiene que poner las imágenes en Images.xcassets; simplemente las coloca en la raíz del proyecto y luego simplemente requiere (''./ myimage.png'') como @anback escribió Mire esta respuesta SO y la tire referencias

Answer 5

Funciona exactamente como espera que funcione. Hay un error https://github.com/facebook/react-native/issues/282 que impide que funcione correctamente.

Si tiene node_modules (con react_native) en la misma carpeta que el proyecto xcode, puede editar node_modules / react-native / packager / packager.js y hacer este cambio: https://github.com/facebook/react-native/pull/286/files . Funcionará mágicamente :)

Si su react_native está instalado en otro lugar y el parche no funciona, comente en https://github.com/facebook/react-native/issues/282 para informarles acerca de su configuración.

Answer 6

Tuve exactamente este mismo problema hasta que me di cuenta de que no había puesto la imagen en mi Image.xcassets . Pude arrastrar y soltarlo en Xcode con Image.xcassets abierto y después de la reconstrucción, ¡solucionó el problema!

Answer 7

Usando React Native 0.41 (en marzo de 2017), orientado a iOS, lo encontré tan fácil como:

<Image source={require(''./myimage.png'')} />

El archivo de imagen debe existir en la misma carpeta que el archivo .js que lo requiere.

No tuve que cambiar nada en el proyecto XCode. Simplemente funcionó. ¡Tal vez las cosas han cambiado mucho en 2 años!

Tenga en cuenta que si el nombre del archivo tiene algo más que letras minúsculas, o la ruta es algo más que "./", entonces para mí, comenzó a fallar. No estoy seguro de cuáles son las restricciones, pero empiece de manera simple y siga adelante.

Espero que esto ayude a alguien, ya que todas las respuestas anteriores parecen excesivamente complejas y llenas de (inapropiados) enlaces externos.

ACTUALIZACIÓN: Por cierto: la documentación oficial para esto está aquí: https://facebook.github.io/react-native/docs/images.html