我目前正在制作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/