图像未显示在现有应用程序的React Native电影教程的设备上

Question

我目前正在做反应原生电影教程（https://facebook.github.io/react-native/docs/tutorial.html），我正在使用设备来显示结果。我使用了一个现有的项目，使用故事板放置了一个视图，并正确地进行了子类化。出于某种原因，图像未显示，而是显示红色框。难道我做错了什么？ 我的反应代码：

'use strict';  
var React = require('react-native');

var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

var Movies = React.createClass({
  render: function() {
  var movie = MOCKED_MOVIES_DATA[0];
  return (
    <View style={styles.container}>
      <Text>{movie.title}</Text>
      <Text>{movie.year}</Text>
      <Image
        source={{uri: movie.posters.thumbnail}}
        style={styles.thumbnail}
      />
    </View>
  );
}

});

React.AppRegistry.registerComponent('Movies', () => Movies);

这是我手机上显示内容的屏幕截图：

Answer 1

只需编写https而不是http，它就能正常工作。但它只有在服务器接受https时才有效。否则，请更改info.plist文件。

Answer 2

问题是您正在尝试从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问题：React-native loading image over https works while http does not work

通过此提交，他们还更改了示例，以便他们现在使用https连接来解决问题：https://github.com/facebook/react-native/pull/367/commits/b00d4b394f590a3d8365d7a63cf5436c499483ec

Answer 3

我有同样的问题，并通过将RCTImage添加到我的podspec来解决它。