ReactNative 入门与探索

ReactNative 简介

Facebook 2015年Rect.js大会推出基于javascript的开源框架
使用react.javascript(简称react.js)开发ios android app
案例：淘宝天猫部分模块 携程部分模块 约约app 篝火app

ReactNative 安装

先安装nvm，nvm 是node版本管理器
![安装nvm终端指令截图](https://img-blog.csdn.net/20160515200710542)
nvm install node&& nvm alias default node  安装node
node   启动node.js环境
brew install watchman 解决node.js监视文件系统的bug
npm config set registry https://registry.npm.taobao.org npm config setdisturl https://npm.taobao.org/dist 上面两个命令是更换用node 下载项目的下载源
npm install -g react-native-cli
react-native init AwesomeProject
从云端拖出 AwesomeProject项目 点击ios 目录AwesomeProject.xcodeproj 就可以跑起来了

ReactNative 开发工具与所需技术基础

使用react.javascript编写，需要掌握javascript的语法,推荐w3cschool入门javascript
sublime text3  高效便捷文本编辑器, 用于编辑javascript
Node是一个Javascript运行环境(runtime)，通过node服务器，可以快速迭代修改应用，然后在设备查看结果使用      react.javascript编写，需要掌握javascript的语法,推荐w3cschool入门javascript
sublime text2  高效便捷文本编辑器, 用于编辑javascript

ReactNative 语法

原生模块  一个原生模块就是一个实现了RCTBridgeModule的协议的类
原生ui组件      使用链接库
reactnative中文网 http://reactnative.cn/docs/0.22/native-component-ios.html#content 
自定义原生模块，实现rctbridgemodule协议
#import "RCTBridgeModule.h"
@interface CalendarManager : NSObject <RCTBridgeModule>
@end
RCT_EXPORT_METHOD() 将原生模块的调用接口暴露给javascript

通过 node服务器，可以快速迭代修改应用，然后在设备查看结果，wifi和设备必须在同一个wifi环境
1   打开AwesomeApp/ios/AwesomeApp/AppDelegate.m
2   修改里面的URL，把localhost改为你的电脑的IP。在Mac系统下，你可以在系统设置/网络里找到电脑的IP地址。
3   在XCode里选中你的设备作为运行目标，然后点击“Build and Run”。

ReactNative 内部实现原理

javascriptcore ios7 官方推出的webview和native交互的库，类似于webviewjavascript
通过javascript  调用本地方法，并通过javascriptcore，进行本地和js数据交互，没有使用webview，比起webview加载   h5，phonegap，appcan等，会更加轻便

ReactNative 优缺点分析

对比hybird app 和 webview优势 ：

不用webview，摆脱了webview交互和性能问题

通过js调用原生方法，体验更好

react.js学习成本较高，要求前端开发人员对ios andorid开发有一定开发经验

对比原生app优势

通过远端更新js来更新app，对比原生app 热更新 jspatch 更新开发会更加快速、简单

前端人员可以快速转行。。

劣势

扩展性不如web,也不如直接写Native code。

从Native到Web，要做很多概念转换，势必造成双方都要妥协。比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的Constraint\origin\Center等属性），再比如动画。另外，若Android和iOS都要做相同的封装，概念转换就更复杂了

参考文档

http://www.bubuko.com/infodetail-764013.html nvm安装文档

http://reactnative.cn/docs/0.22/running-on-device-ios.html#content reactnative中文网

http://www.zhihu.com/question/27852694 知乎上对reactnative的总结

http://www.jianshu.com/p/d1b9a64e2e37 sublietext2 入门指南

http://www.w3school.com.cn/js/index.asp w3school 很好的javascript入门网站

http://zhuanlan.zhihu.com/FrontendMagazine/19996445 reactnatice实战