React Native 0.20官方入门教程

最近对React Native比较有兴趣，简单把官网的入门例子做了一下，发现了很多坑，特别是watchman版本过低的问题，导致总是运行不起来。所以 这里特别下载了最新的watchman，进行了源码编译。希望本文对刚学习的新人有用。

安装Rect Native

安装必要的依赖watchman

cd watchman-4.5.0 ./autogen.sh ./configure --prefix=/usr/local/Cellar/watchman/2.9.8 --with-pcre make make install

安装Rect Native开发工具

npm install -g react-native-cli react-native init <APP_NAME>

IOS版本的项目文件用XCODE打开<APP_NAME>/ios/<APP_NAME>.xcodeproj，运行⌘+R即可

此时通过修改index.ios.js 运行⌘+R查看视图变化

模拟数据

通常在index.ios.js或index.android.js 顶部增加

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

修改代码,增加Image组件支持

import React, {   AppRegistry,   Component,   Image,   StyleSheet,   Text,   View } from 'react-native';

修改render

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

更新样式代码

const styles = StyleSheet.create({   container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',   },   thumbnail: {       width: 53,       height: 81,   } });

Xcode中⌘+R重新载入，即看到视图已载入我们的模拟数据。

重新布局

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

更新样式

const 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,   } });

获取真实的数据

添加API数据地址

var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

完整代码

'use strict';  import React, {   AppRegistry,   Component,   Image,   StyleSheet,   Text,   View } from 'react-native';  var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';  class FaceMash extends Component {   constructor(props){     super(props);     this.state = {       movies: null,     };   }      componentDidMount(){     this.fetchData();   }      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>       );   } }  const 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,   } });  AppRegistry.registerComponent('FaceMash', () => FaceMash);

显示列表

/**  * Sample React Native App  * https://github.com/facebook/react-native  */ 'use strict';  import React, {   AppRegistry,   Component,   Image,   ListView,   StyleSheet,   Text,   View } from 'react-native';  var API_KEY='7waqfqbprs7pajbz28mqf6vz'; var API_URL = 'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'; var PAGE_SIZE = 25; var PARAMS = '?apikey='+API_KEY+'&page_limit='+PAGE_SIZE; var REQUEST_URL = API_URL+PARAMS;  class FaceMash extends Component {   constructor(props){     super(props);     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({               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}>         </ListView>                 );   }      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>       );   } }  const styles = StyleSheet.create({   container: {     flex: 1,       flexDirection: 'row',     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',   },   listView: {       paddingTop: 20,       backgroundColor: '#F5FCFF',   },   rightContainer: {       flex: 1,   },   title: {       fontSize: 20,       marginBottom: 8,       textAlign: 'center',   },   year: {       textAlign: 'center',   },   thumbnail: {       width: 53,       height: 81,   } });  AppRegistry.registerComponent('FaceMash', () => FaceMash);