No se puede mostrar la image en React Native

Estoy usando react-native 0.28.0

Estoy intentando mostrar una image en el simulador de iPhone de acuerdo con este tutorial: http://www.appcoda.com/react-native-introduction/

var styles = StyleSheet.create({ image: { width: 107, height: 165, padding: 10 } } var imageURI = 'http://books.google.com/books/content?id=PCDengEACAAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api' 

Luego, en la function render() , agrego esto:

 <Image style={styles.image} source={{uri:imageURI}} /> 

El espacio asignado para la image está allí, pero la image no se muestra.

Además de la respuesta de Jonathan Stellwag, la primera solución solo funciona si el URI usa https o si configura la security de transporte de la aplicación.

Consulte No se puede mostrar la image por URI en React Native Simulator iOS

Espero que las siguientes soluciones lo puedan ayudar: todos pueden usarse para Image

1. Solución HTTPS:

  1. Su image es proporcionada por un URI – source={{uri:imageURI}}
  2. Ejemplo: source={{uri: 'https://i.vimeocdn.com/portrait/58832_300x300.jpg'}}
  3. Importante: no olvide configurar el clip dos veces: {{}}

2. HTTP-Solución:

  1. Si desea http, busque la siguiente solución: problema HTTP Github
  2. La solución: – HTTP-Solution

3. Local-Picture

  1. Guardar: crea una nueva carpeta para tus imágenes y guárdalas localmente allí (carpeta: imágenes)
  2. Requerir: Requiera la image que guardó localmente usando la syntax entre

var yourPicture = require ('.http://iosberry.compicture.jpg');

  • Notación para la misma carpeta ('./')
  • Notación para la carpeta anterior ('../')
  • Notación para más carpeta arriba ('…/../../')
  1. Uso: usa tu image en la function de renderizado
 render(){ return( <Image source={yourPicture}/> ) } 

El estilo de tus imágenes funciona como lo describiste

Cuando agregue la label de Imagen y use uri , debe verificar lo siguiente:

  • Agregar el estilo de ancho y alto para la label de image:
    ex:
    <Image source={{uri: 'https://facebook.github.io/react/img/logo_og.png'}} style={{width: 400, height: 400}} />
    Imagen doc

  • Usando urls HTTP: necesitará habilitar la security del transporte de la aplicación
    Seguridad de transporte de aplicaciones para iOS

  • Uso de urls HTTPS: funcionará normalmente