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

Question

我正在使用 react-native 0.28.0

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

Introduction to React Native: Building iOS Apps with JavaScript | Appcoda

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}} />

为图片分配的空间在那里，但没有显示图片。

---

但是，如果我改用本 map 片，则会显示图片。

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

在 render() 函数中:

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

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

Answer 1

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

如果您的代码与另一个使用 https 而不是 http 的 uri 一起工作，请尝试。 在 Android 中，它应该可以很好地使用 http 或 https。

阅读更多 https://github.com/facebook/react-native/issues/8520和 WWDC 2016: Apple to require HTTPS encryption on all iOS apps by 2017 .

如果你真的想通过 http 加载一些东西，你可以编辑 info.plist 文件并在那里添加你的异常(exception)。此处提供更多详细信息: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 .