无法在React Native iOS模拟器中按URI显示图像

Question

我正在使用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}} />

为图像分配的空间在那里,但图像未显示.

---

但是,如果我使用本地图像,则会显示图像.

var Picture = require('./content.jpeg')

在render()功能:

<Image source={Picture} style={styles.thumbnail} />

如何使用URI作为源显示图片？

Answer 1

问题是你正试图从http连接加载图像而不是苹果要求的https连接.
如果您的代码与另一个使用https而不是http的uri一起使用,请尝试使用.在Android中,它应该可以正常使用http或https.
欲了解更多信息, 请访问https://github.com/facebook/react-native/issues/8520和http://www.techrepublic.com/article/wwdc-2016-apple-to-require-https-encryption-on-all -ios-apps-by-2017 /.

如果你真的想通过http加载一些东西,你可以编辑info.plist文件并在那里添加你的异常.更详细的信息,请访问https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

另请参阅我的stackoverflow问题:https上的React-native加载图像在http不起作用时有效

Answer 2

这是图像中汉堡图标的示例代码-

<Image source={{ uri: 'http://i.imgur.com/vKRaKDX.png', width: 32, height: 32, }} /> 

有关更多信息，您可以参考此处 - https://facebook.github.io/react-native/docs/image.html