React Native 0.20官方入门教程-白红宇

React Native 0.20官方入门教程

阅读量：6573 次

发布时间：2019-06-24

本文共 5493 字，大约阅读时间需要 18 分钟。

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

安装Rect Native

安装必要的依赖watchman

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

安装Rect Native开发工具

npm install -g react-native-clireact-native init

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 (      
            
     
      {movie.title}
             
     
      {movie.year}
             
           
        );  }

更新样式代码

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 (      
            
             
               
      
       {movie.title}
                
      
       {movie.year}
              
           
        );  }

更新样式

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 (          
                  
     
                        Loading movies...              
               
          );  }    renderMovie(movie){      return (        
              
               
                 
      
       {movie.title}
                  
      
       {movie.year}
                
             
          );  }}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 (          
            
                   );  }    renderLoadingView(){      return (          
                  
     
                        Loading movies...              
               
          );  }    renderMovie(movie){      return (        
              
               
                 
      
       {movie.title}
                  
      
       {movie.year}
                
             
          );  }}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);

转载地址：http://uwwno.baihongyu.com/

你可能感兴趣的文章