最近对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'}},];
- 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',rightContainer: {
- flex: 1,title: {
- fontSize: 20,marginBottom: 8,textAlign: 'center',year: {
- textAlign: 'center',}
- });
获取真实的数据
添加API数据地址
- var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';
完整代码
- 'use strict';
- import React,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,}
- });
- AppRegistry.registerComponent('FaceMash',() => FaceMash);
显示列表
- /**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
- 'use strict';
- import React,ListView,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,listView: {
- paddingTop: 20,() => FaceMash);