React Native 二:快速入门

前面我们使用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‘, () => AwesomeProject);

二、重新加载js

修改完index.android.js文件后，摇晃你的手机，会弹出如下菜单。选择Reload JS：

三、添加一些样式

现在们修改下标题，年份和图片的展示，通过添加一些样式展示呈左右布局形式，修改index.android.js文件如下：

1.index.android.js文件：

var MOCKED_MOVIES_DATA = [
  {title: ‘Title‘, year: ‘2015‘, posters: {thumbnail: ‘http://i.imgur.com/UePbdph.jpg‘}},
];

import React, {
   ... ...
} from ‘react-native‘;
class AwesomeProject extends Component {
  render() {
    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 styles = StyleSheet.create({
  container: {
    flex: 1,
    //横向排列
    flexDirection: ‘row‘,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  //渲染剩余空间
  rightContainer: {
      flex: 1,
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
  //添加title和year展示样式
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: ‘center‘,
  },
  year: {
    textAlign: ‘center‘,
  },
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

2.重新加载JS，展示如下：

四、获取真实数据

下面我们从Rotem Tomatoes.s的API获取数据，用于React-Native展示：

1.修改index.android.js文件

//获取远程真实数据的URL
var REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;
import React, {
   ... ...
} from ‘react-native‘;
class AwesomeProject extends Component {
  //构造函数，初始化movies为null
  constructor(props) {
    super(props);
    this.state = {
      movies: null,
    };
  }
  //组件在加载到虚拟DOM的时候，请求API数据
  componentDidMount() {
    this.fetchData();
  }
  //请求API数据
  fetchData() {
    fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {
      this.setState({
        movies: responseData.movies,
      });
    }).done();
  }
  render() {
    //未请求数据，正在加载中...
    if (!this.state.movies) {
      return this.renderLoadingView();
    }
    //数据返回了，渲染电影数据
    var movie = this.state.movies[0];
    return this.renderMovie(movie);
  }
  //渲染正在加载中
  renderLoadingView() {
    return (
      <View style={styles.container}>
        <Text>
          Loading movies...
        </Text>
      </View>
    );
  }
  //渲染获取电影数据
  renderMovie(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>
    );
  }
}
var styles = StyleSheet.create({
  ... ...
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

2.重新加载JS，显示如下：

五、列表展示

我们尝试把API中请求返回的所有数据，用ListView展示出来；

1.修改index.android.js文件；

var REQUEST_URL = ‘https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json‘;
import React, {
  ... ...
  //引入列表控件
  ListView,
  ... ...
} from ‘react-native‘;
class AwesomeProject extends Component {
  constructor(props) {
    super(props);
    //初始化列表数据源dataSource
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData() {
    fetch(REQUEST_URL).then((response) => response.json()).then((responseData) => {
      this.setState({
        //请求API返回的电影数据作为列表的数据源
        dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
        loaded: true,
      });
    }).done();
  }

  render() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderMovie}
        style={styles.listView}/>
    );
  }
  renderLoadingView() {
    ... ...
  }
  renderMovie(movie) {
    return (
      ... ...
    );
  }
}
var styles = StyleSheet.create({
  ... ...
  //列表展示样式
  listView: {
    paddingTop: 20,
    backgroundColor: ‘#F5FCFF‘,
  },
});
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

2.重新加载JS，显示如下：