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文件

//获取远程真实数据的URLvar 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，显示如下：