前面我们使用react-native init创建了一个项目,这是一个简单的Hello World App(项目结构如下图)。对于iOS来说,你需要编辑index.ios.js来改变App;对于Android,你需要编辑index.android.js来修改App。然后摇晃菜单中点击Road JS查看改变。下面我们就以Android为例子来尝试修改了App。
一、修改index.android.js文件
index.android.js文件:
//Mock数据
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
//导入React-Native相关组件
import React, {
AppRegistry,
Component,
Image,
StyleSheet,
Text,
View,
} from 'react-native';
//创建AwesomeProject组件类
class AwesomeProject extends Component {
//使用Mock数据,通过Html渲染组件
render() {
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>
);
}
}
//渲染组件的样式
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
});
//注册创建的AwesomeProject组件类
AppRegistry.registerComponent('AwesomeProject', () => Aw