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

Question

我正在使用 react-native 0.28.0

我正在尝试根据本教程在 iPhone 模拟器上显示图像：

React Native 简介：使用 JavaScript 构建 iOS 应用程序 |应用程序

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 作为源来显示图片？

原文由 Fredric Sanjaya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

问题是您正在尝试从 http 连接加载图像，而不是像 Apple 要求的那样从 https 连接加载图像。

试试你的代码是否适用于另一个使用 https 而不是 http 的 uri。在 Android 中，它应该可以与 http 或 https 一起正常工作。

在 https://github.com/facebook/react-native/issues/8520 和 WWDC 2016 上阅读更多内容：Apple 要求到 2017 年对所有 iOS 应用程序进行 HTTPS 加密。

如果你真的想通过 http 加载一些东西，你可以编辑 info.plist 文件并在那里添加你的异常。此处提供更多详细信息： Configuring App Transport Security Exceptions in iOS 9 and OSX 10.11 。

另请参阅我的 StackOverflow 问题： React-native loading image over https works while http does not work 。

原文由 Orlando 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

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

原文由 Dlucidone 发布，翻译遵循 CC BY-SA 3.0 许可协议