React Native 0.20官方入门教程
lxfleolu
9年前
来自： https://segmentfault.com/a/1190000004523974
最近对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/非死book/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/非死book/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/非死book/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);</div>