最近对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重新载入，即看到视图已载入我们的模拟数据。

重新布局

使用FlexBox布局
改变结构代码

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 (<ListViewdataSource={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);