从零开始学React Native App开发

1)安装Homblew，必要工具vpn

通过终端运行命令

ruby-e"$(curl-fsSLhttps://raw.githubusercontent.com/Homebrew/install/master/install)"

安装完毕，运行执行 blew －v 查看版本号，确定是否安装成功

2)安装nodes.js

a.首先安装 nvm,nvm使你可以可以同时安装多个版本的Node.js，并且在这些版本之间轻松切换。

安装－ 终端命令输入 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.1/install.sh | bash

这个过程其实就是 去https://github.com/creationix/nvm#installation把一个install scriptxi运行

下载执行完毕后会提示你没有设置环境变量啥的，通过终端在根目录下建立一个 .bashrc 及./bash_profile

加入下面内容

export NVM_DIR="/Users/cbf/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

export ANDROID_HOME=~/Library/Android/sdk ＃ 这个是你的sdks环境变量

然后进入 .nvm 文件夹下执行 ./install.sh 即可安装成功

然后 nvm -v 查看是否安装成功

b.安装node,终端安装命令

nvm install node && nvm alias default node

安装完成后，通过 node 命令确定是否安装成功

3)安装watchman

在命令行中输入brew install watchman，我们推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。

4)安装flow

如果你希望使用flow来为js代码加上类型检查，那么在命令行中输入brew install flow来安装flow。

5)OS开发环境准备

需要xcode 7以上，我下载的事xcode7.2 ，需要os x 10.10.5 版本才能支持

6)快速开始

由于众所周知的网络原因，react-native命令行从npm官方源拖代码时会遇上麻烦。请将npm仓库源替换为国内镜像：

终端－》

npm config set registryhttps://registry.npm.taobao.org

npm config set disturlhttps://npm.taobao.org/dist

npm install -g react-native-cli

init 项目命令

react-native init AwesomeProject ＃新建一个项目

不过这个时间太久，推荐使用下面网址的项目，解压后直接可以运行

http://bbs.reactnative.cn/topic/11/react-native%E4%B8%AD%E6%96%87%E7%BD%91%E5%AE%98%E6%96%B9%E5%8F%91%E5%B8%83%E5%AE%8C%E6%95%B4%E6%96%B0%E9%A1%B9%E7%9B%AE%E5%8C%85- %E6%97%A0%E9%9C%80init%E7%9B%B4%E6%8E%A5%E8%BF%90%E8%A1%8C

7）运行iOS应用

$ cd AwesomeProject

用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。

使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。

在iOS Emulator中按下?-R就可以刷新APP并看到你的最新修改！

运行Android应用 ，干巴巴的，给大家上张图先

8）运行android应用

$ cd AwesomeProject

$ react-native run-android

使用你喜欢的文本编辑器打开index.android.js并随便改上几行

按Menu键（通常是F2，在Genymotion模拟器中是?+M）然后选择 Reload JS 就可以看到你的最新修改。

在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

windows 下安装环境未亲自过坑，大家可以参见一下博客尝试

http://www.cnblogs.com/meteoric_cry/p/4874517.html

1.4 基础开发工具与调试

2. React Native 开发基础

2.1flexbox 布局基础知识

什么是Flexbox

Flexbox 是css3 里面引入的布局模型－弹性盒子模型，旨在通过弹性的方式来对齐河分布容器中的内容空间，

使其能够适应不同屏幕的宽度。 react nativie中 的flexbox 是这个规范的一个子集

Flexbox解决了什么问题？

浮动布局

不同宽度屏幕的适

宽度自动分配

水平垂直居中

Flex 属性

容器属性

flexDirection ： row,row-reverse,colum,colum-reverse #类型于linerlayout 里的 orientation 属性

flexWrap : wap,nowap,wap-reverse #textview 是否换行

alignItems ： flex-start,flex-end,center,stretch # item 的 排列对齐方式 ，上对齐，下对齐 上下间距对齐， 以及严苛对其

justifyContent：flex-start,space-between,space-roud # 类似于linerlayout里 layout_gravity 属性

元素属性

flex ：number #类型于weight 属性

alignSelf ：atuo,flex-start,stretch #类似于 gravity 属性

其他

flex－flow flexDirection 和 flexWrap 属性 的简写形式，默认值为 row nowrap

更详细的布局知识可以参见下面

React Native 布局指南-v4.pdf

2.2.JaveScript 语法基础

经常看到源码里面符号 ＝>表示的意思

//ES

var selected = allJobs.filter(function (job) {

return job.isSelected();

});

// ES6

var selected = allJobs.filter(job => job.isSelected());

2.3 React Native 开发基础支持及代码解读

在React中，所有UI的组件都被放置在render（）方法中，并且被state状态控制。

你的render（）方法定义了UI在各种状态是如何展现的。当调用setState()的时候，React会找到需要改变的部分并替你修改。

一个简单的按钮时间可以通过如下表示

<Text>{this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}

</Text>this.setState({buttonClicked:!this.state.buttonClicked});

2.4 组建生命周期图

就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，

就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：

http://mp.weixin.qq.com/s? __biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&scene=1&srcid=1119XfFA8t5QQprIjzp76fcr &key=ff7411024a07f3ebf6601418be94ccd6219ed18e580029547278b6eadd5def524defc8dbfdfcf673a7daa87723cfa4bb&ascene=0&uin=NTYzM Dc5MTc1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.11.1+build(15B42)&version=11020201&pass_ticket=a82zcv0P%2B6ztN4xgc dnD%2FWtFbQjxhMOiiUJGZVbk6FUhTeozLqrMlGuES%2FvVmaI0

React Native 中组件的生命周期
http://www.race604.com/react-native-component-lifecycle/?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io