我目前正在制作React Native电影教程(https://facebook.github.io/react-native/docs/tutorial.html),并且正在使用一种设备来显示结果。我使用了一个现有的项目,使用 Storyboard 放置了一个 View ,并正确地对其进行了子分类。由于某些原因,没有显示图像,而是显示了一个红色框。难道我做错了什么?
我的React代码:

'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);

这是我的手机上显示的屏幕截图:

最佳答案

只需编写https而不是http即可,它将起作用。但是,只有在服务器接受https的情况下,它才起作用。否则,请更改info.plist文件。

关于javascript - 在现有应用程序上的React Native电影教程的设备上未显示图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30700776/

10-11 12:28
查看更多