使用下面的命令
$ npm install -g react-native-cli
$ react-native init AwesomeProject
生成一个名为AwesomeProject的项目,输入
$ cd AwesomeProject/
$ react-native run-android
可以让项目工程运行起来。通过修改`index.android.js` 文件可以改变显示内容。 ### 显示本地数据 在文件开头`var React = require(‘react-native’);` 下面添加如下代码
var MOCKED_MOVIES_DATA = [
{title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];
这里定义了一个数据,包括标题、日期和缩略图地址。 下面把这些显示出来 控件声明在
var {
AppRegistry,
Image,
StyleSheet,
Text,
View,
} = React;
显示图片用Image,文字用Text 页面显示逻辑在render函数里
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>
);
}
`` 定义了显示的布局,布局参数通过style来控制。
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
thumbnail: {
width: 53,
height: 81,
},
});
`F2` -> `Reload JS` 可以重新加载布局文件,显示数据
### 改变布局
var styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
title: {
fontSize: 20,
marginBottom: 8,
textAlign: 'center',
},
year: {
textAlign: 'center',
},
thumbnail: {
width: 53,
height: 81,
},
});
其中`flexDirection: ‘row’` 可以控制横向显示,就像LiearLayout的orientation=”horizental”。 布局参数应用到布局中
render: function() {
var movie = MOCKED_MOVIES_DATA[0];
return (
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
},
重新加载显示如下
### 加载网络数据 数据来源
var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
添加到文件开头`var React = require(‘react-native’);` 下面, 初始化数据定义在getInitialState中,我们会把网络请求的数据保存在movies变量中
getInitialState: function() {
return {
movies: null,
};
},
`componentDidMount` 是一个生命周期函数,会在控件加载完毕后调用,我们在这里去发起获取数据请求
componentDidMount: function() {
this.fetchData();
},
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
movies: responseData.movies,
});
})
.done();
},
在网络数据返回之前显示loading页面,数据返回后再具体显示,可以通过判断movies的状态来显示具体的内容
render: function() {
if (!this.state.movies) {
return this.renderLoadingView();
}
var movie = this.state.movies[0];
return this.renderMovie(movie);
},
renderLoadingView: function() {
return (
<View style={styles.container}>
<Text>
Loading movies...
</Text>
</View>
);
},
renderMovie: function(movie) {
return (
<View style={styles.container}>
<Image
source={{uri: movie.posters.thumbnail}}
style={styles.thumbnail}
/>
<View style={styles.rightContainer}>
<Text style={styles.title}>{movie.title}</Text>
<Text style={styles.year}>{movie.year}</Text>
</View>
</View>
);
},
ListView
当数据是重复多条时,我们需要用ListView显示。添加ListView的声明
var {
AppRegistry,
Image,
ListView,
StyleSheet,
Text,
View,
} = React;
添加布局参数
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
修改布局
render: function() {
if (!this.state.loaded) {
return this.renderLoadingView();
}
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderMovie}
style={styles.listView}
/>
);
},
dataSource
是ListView的数据接口,在getInitialState
中初始化
getInitialState: function() {
return {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
},
修改数据请求
fetchData: function() {
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
loaded: true,
});
})
.done();
},
最终的运行结果
Done.