React Native ——入门环境搭配以及简单实例
一、Homebrew 是OS X 的套件管理器。
首先我们需要获取 Homebrew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1、我们可以先通过在终端输入: brew -v
如果没有安装就输入Homebrew的镜像路径去下载
2、拥有了brew,就可以通过它去下载一些依赖了,比如node,我们可以在终端输入:brew install node,如果提示 already installed说明已经下载过了
3、下载watchman,终端输入:brew install watchman,它是用来检测文件变化的一个工具,如果提示 already installed说明已经下载过了
4、然后可以下载flow,终端输入:bre install flow ,它是用来检测jsx语法的工具,如果提示 already installed说明已经下载过了
5、安装完依赖之后,我们就通过npm来安装react Native的命令行工具,终端输入:npm install -g react-native-cli
6、这个时候我们就可以通过命令行来创建一个HelloWorld:react-native init HelloWorld ,过程会比较久一点呐
如果确实是太久,那就应该是npm加载的问题啦,可以换成淘宝的镜像(http://npm.taobao.org/),终端输入:
alias cnpm="npm --registry=https://registry.npm.taobao.org \
--cache=$HOME/.npm/.cache/cnpm \
--disturl=https://npm.taobao.org/dist \
--userconfig=$HOME/.cnpmrc"
7、又或者是要取得权限,终端输入:sudo react-native init HelloWorld
二、demo。
1、demo1:首页显示一张图片和文字,图片不能仅仅通过构建控件,还需要设置宽高[通过index.ios.js文件进行修改]
1 /** 2 * Sample React Native App 3 * https://github.com/facebook/react-native 4 */ 5 'use strict';//表示在严格模式下的JS文件 6 7 var React = require('react-native');//定义react组件的依赖 8 9 //demo:增加一个Image属性 10 var MOCKED_MOVIES_DATA = [ 11 {title: 'myTitle', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}}, 12 ];
//等同于 var React = AppRegistry;这样的简化,这是ES6的写法
//每一个属性对应的是React里面提供的组件 13 var { 14 AppRegistry, 15 Image, 16 StyleSheet, 17 Text, 18 View, 19 } = React; 20 21 var HellWorld = React.createClass({ 22 render: function() { 23 24 var movie = MOCKED_MOVIES_DATA[0]; 25 26 return ( 27 <View style={styles.container}> 28 29 <Text >{movie.title}</Text> 30 31 <Image 32 source={{uri:movie.posters.thumbnail}} 33 style={styles.thumbnail} 34 /> 35 36 </View> 37 ); 38 } 39 }); 40 41 var styles = StyleSheet.create({ 42 container: { 43 flex: 1, //flexbox 44 justifyContent: 'center', //垂直居中 45 alignItems: 'center', 46 backgroundColor: '#F5FCFF', 47 }, 48 thumbnail:{ 49 width:53, 50 height:90, //长度无单位,默认PT 51 }, 52 }); 53 54 55 //注册组件:ES6的写法,引号内是组件名字,后面是返回对应的组件 56 AppRegistry.registerComponent('HellWorld', () => HellWorld);
2、demo2:在1 的基础上构造一个列表,通过网络数据请求动态绑定
1 /** 2 * Sample React Native App 3 * http://www.cnblogs.com/daomul/ 4 */ 5 'use strict'; 6 7 /*网络请求URL*/ 8 var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; 9 10 var React = require('react-native'); 11 12 var { 13 AppRegistry, 14 Image, 15 StyleSheet, 16 Text, 17 View, 18 ListView, 19 } = React; 20 21 var HellWorld = React.createClass({ 22 23 getInitialState:function(){ 24 return { 25 dataSource:new ListView.DataSource({ 26 rowHasChanged: (row1,row2) => row1 !== row2 27 }), 28 loaded:false, 29 } 30 }, 31 componentDidMount:function(){ 32 this.fetchData(); 33 }, 34 render: function() { 35 if (this.state.loaded) { 36 return this.renderList(); 37 }else { 38 return this.renderLoadingView(); 39 } 40 }, 41 renderList:function(){ 42 return (<ListView 43 dataSource={this.state.dataSource} 44 renderRow={this.renderListItem} 45 style={styles.listView} 46 />); 47 }, 48 renderListItem:function(movie){ 49 return <View style={styles.container}> 50 51 <Image 52 source={{uri:movie.posters.thumbnail}} 53 style={styles.thumbnail} 54 /> 55 <View style={styles.rightContainer}> 56 <Text style={styles.title}>{movie.title}</Text> 57 <Text style={styles.year}>{movie.year}</Text> 58 </View> 59 </View>; 60 }, 61 renderLoadingView:function(){ 62 return <View style={styles.listView}> 63 <Text>loading.....</Text> 64 </View>; 65 }, 66 67 //负责数据的抓取 68 fetchData:function(){ 69 fetch(REQUEST_URL) 70 .then((response)=>response.json()) 71 .then((responseData)=>{ 72 this.setState({ 73 dataSource:this.state.dataSource.cloneWithRows(responseData.movies), 74 loaded:true, 75 }); 76 }) 77 .done();/*调用.done不然有错误信息会被吃掉的*/ 78 }, 79 }); 80 81 /*flexDirection:'row' 子容器按照水平方向来flex*/ 82 var styles = StyleSheet.create({ 83 container: { 84 flex: 1, 85 justifyContent: 'center', 86 flexDirection:'row', 87 alignItems: 'center', 88 backgroundColor: '#F5FCFF', 89 }, 90 thumbnail:{ 91 width:53, 92 height:90, 93 }, 94 rightContainer:{ 95 flex:1, 96 }, 97 title:{ 98 fontSize:20, 99 marginBottom:8, 100 textAlign:'center', 101 }, 102 year:{ 103 textAlign:'center', 104 }, 105 listView:{ 106 paddingTop:20, 107 backgroundColor:'#F5FCFF', 108 } 109 }); 110 111 AppRegistry.registerComponent('HellWorld', () => HellWorld);