从零开始学React Native App开发

转载
lReactN
目录
1. React Native简介
1.1 从何而来，背景介绍
1.2 为什么要使用React Native开发
1.3 环境搭建
1.4 基础开发工具与调试

1. React Native 开发基础
   2.1 flexbox 布局基础知识
   2.2.JaveScript 语法基础
   2.3 React Native 开发基础支持及代码解读
   2.4 React Native 组建生命周期

2. 编写第一个React Native Demo

3. React Native 在实际项目的应用
   5.学习参考网址

   前言
   年初写的，用于公司内部技术分享的，一直偷懒没搬到csdn上来。今天心情不好，给它帮个家吧，这个技术分享，并不是技术博客，
   所以很多东西是讲出来的，这里记录不不全，大家将就吧。＝＝！。

1.1 从何而来，背景介
React 起源于 Facebook 的内部项目，因为 FB 对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram的网站。
做出来以后，发现这套东西很好用，就在2013年5月开源了。后来延伸到其他平台就有了 React Native ，2015年10月Raact Native 支持了

android 平台。React 不同于PhoneGap ，H5,它的口号是 Learn Once ，Write anyWhere !

1.2 为什么要使用React Native开发
a.比webview 更好的体验，更好的性能，更好的手机交互
（参见博客 H5、React Native、Native应用对比分析 http://vczero.github.io/react_native/H5-React-Native-Native.html）
b.未来发展的一种趋势之一，提前了解学习，装13
c.解决项目中一些痛点，比如更新，ui方面的需求改动，丰富的运营手段。

1.3 环境搭建 (Mac OS)

1)安装Homblew，必要工具
通过终端运行命令
ruby -e “$(curl -fsSL https://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 script xi运行
下载执行完毕后会提示你没有设置环境变量啥的，通过终端在根目录下建立一个 .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应用
cdAwesomeProject用XCode打开ios/AwesomeProject.xcodeproj并点击Run按钮。使用你喜欢的文本编辑器打开index.ios.js并随便改上几行。在iOSEmulator中按下⌘−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 基础开发工具与调试
我用的是sublime Text ，另外装了些代码补全和高亮的插件,插件通过Package Install 来安装
安装的插件见下图

1. 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,flex-end,center,space-between,space-roud # 类似于linerlayout里 layout_gravity 属性

   元素属性
   flex ：number #类型于weight 属性
   alignSelf ：atuo,flex-start,flex-end,center,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会找到需要改变的部分并替你修改。
   一个简单的按钮时间可以通过如下表示
   {this.state.buttonClicked ? ‘Hello World’ : ‘Goodbye World’}
   this.setState({buttonClicked:!this.state.buttonClicked});

   2.4 组建生命周期图
      就像 Android 开发中的 View 一样，React Native（RN） 中的组件也有生命周期（Lifecycle）。所谓生命周期，
      就是一个对象从开始生成到最后消亡所经历的状态，理解生命周期，是合理开发的关键。RN 组件的生命周期整理如下图：
   

   可以把组件生命周期大致分为三个阶段：
   第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化；
   第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
   第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。

   学习更详细信息参考链接
   通往全栈工程师的捷径 —— React
   http://mp.weixin.qq.com/s?__biz=MzA3NTYzODYzMg==&mid=401107957&idx=1&sn=200418877771f656c1a0ab33ad407516&scene=1&srcid=1119XfFA8t5QQprIjzp76fcr&key=ff7411024a07f3ebf6601418be94ccd6219ed18e580029547278b6eadd5def524defc8dbfdfcf673a7daa87723cfa4bb&ascene=0&uin=NTYzMDc5MTc1&devicetype=iMac+MacBookPro11%2C1+OSX+OSX+10.11.1+build(15B42)&version=11020201&pass_ticket=a82zcv0P%2B6ztN4xgcdnD%2FWtFbQjxhMOiiUJGZVbk6FUhTeozLqrMlGuES%2FvVmaI0

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

1. 编写第一个React Native Demo

2. React Native 在实际项目的应

5.学习参考网址

参考资料
http://reactnative.cn/docs/navigatorios.html#content＃ react native 中文社区
http://www.jianshu.com/p/96febc4fec45 ＃平安科技移动开发二队技术周报（特别版のReact Native专题）
http://www.cnblogs.com/unofficial/p/4843734.html ＃window 下搭建react native 环境
http://www.cnblogs.com/meteoric_cry/p/4874517.html ＃ 踩过的坑
http://stackoverflow.com/questions/32572399/react-native-android-failed-to-load-js-bundle # mac 下模拟器调试出问题，参见这个
The emulator (already launched) will return: Unable to download JS Bundle; start again the JS server:
react-native start Hit Reload JS on the emulator. It worked for me. Hope it will help
http://www.oschina.net/translate/going-native-with-react # react native app 简单教程
https://github.com/xujinyang/react-native-android-guide

加群请扫码