React Native——第一个示例

使用下面的命令

$ 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> ); }

<View></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',rightContainer: { flex: 1,title: { fontSize: 20,marginBottom: 8,textAlign: 'center',year: { textAlign: 'center',});

其中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,ListView,} = React;

添加布局参数

listView: { paddingTop: 20,},

修改布局

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.