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',
    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.