混合开发一直都比较想接触的技术，所以这几天就学习了下React Native的配置及JavaScript的基础，体验一把混合开发的魅力。
一、React Native介绍
Learn once，Write anywhere
以下内容来自：React Native - 入门介绍（起源、特点、与其它移动技术的比较）
1、起源
（1）Native App 优点是功能强大、性能优越。但终究是受制于苹果，而且多版本维护十分痛苦。
（2）为了不受苹果掌控，Facebook 曾花费大量的人力物力进行移动 HTML5 技术研发。虽然有些成果，但始终离 Native App 有差距，而且这个差距可能永远赶不上。
（3）2012年9月，Facebook 方面承认“Betting on HTML5 was a mistake.”。便放弃移动 HTML5，全力转型 Native App 开发。
（4）在转型 Native App 开发后，Facebook 内部其实还在研发一种新的移动技术，并开始使用这种技术开发内部 App。这个技术便是 React Native。
（5）2015年3月，Facebook 正式公开发布 React Native，并将该技术开源。虽然当时开发平台仅支持 Mac OS，部署也仅支持 iOS 平台。
（6）2015年9月15日，Facebook 发布了 React Native for Android，把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台 Android 上。至此，React Native 实现了跨平台的特性。
原文:React Native - 入门介绍（起源、特点、与其它移动技术的比较）
2、React、React.js、React Native三者的联系
- React 是基础框架,提供了一套基础设计实现理念。
- React.js 是在 React 理念的指导下产生的专门用来开发网页的 web 前端框架。与 React 同时出现和发展，React 的相关概念都在 React.js 文档中。
- React Native 是用来开发移动端 app 的。只不过是用了 React.js 那套模式，而底层是对 Native Code 的封装及调用。
3、React Native与其它移动技术的比较
在 React Native 出现前，我们通常会选择这三种移动技术（Native App、HTML5、Hybrid）之一进行开发。
- Native App：开发原生应用自然性能最好，功能强大。但多平台版本的开发、维护要花费大量的人力物力。
- HTML5：虽然有 Web 的优势，即灵活的布局能力、免发版的敏捷迭代潜力、优秀的跨平台特性。在新闻资讯等一些强排版、弱交互的展示类 App 上大展拳脚。但由于 WebView 在移动设备上的性能制约，始终难成大器，这也是 Facebook 放弃其的原因。
- Hybrid：以 Cordova（PhoneGap）为代表的 Hybrid 方式集 Native App 和 Web 优点于一体，使二者相互补短。
而 React Native 思想与上面三者都不一样。它的底层引擎是 JavaScript Core，但调用的是原生的组件而非 HTML5 组件。这样运行时可以做到与 Navive App 相媲美的性能体验，同时因为 JavaScript 代码可以使用后端强大的 Web 方式管理，既可以做到高效开发，也可以实现快速部署和问题热修复。
4、React Native的优点
（1）性能媲美原生应用
由于 React Native 提供的组件是对原生 API 的暴露。虽然我们是用 js 写的代码，但实际上调用的是原生 API，原生的 UI 组件。体验上足以媲美原生应用。
（2）开发效率高
相比于原生开发，js 学习成本低、语法灵活。允许让 Web 开发者更多地基于现有经验开发 App。
（3）组件化开发
React 强调将应用划分成多个互不相关的组件，每个组件作为一个独立的视图。这种类似搭积木的开发方式使得代码结构清晰、通用性高、可移植性高。上一个项目的某些组件，可以很方便地拿来在下一个项目中使用。对于那些优秀的第三方组件，也能很方便地集成到我们项目中来。
（4）节约开发成本
百分之90多界面可以通过 React Native 开发，一份代码同时可以适配 Android 和 iOS。并通过一些手段自动匹配不同屏幕大小的手机，再也不需要自己去计算视图的大小和位置。
（5）实时远程调试
React Native 的调试比 Cordova 不知道好到哪里去了。开启了实时重载之后，代码一改，app 就自动更新成最新，对于 UI 的搭建简直是省了不少的编译时间。同时可以打开 XCode 实时的看到所有的 log 信息。
（6）代码热部署
我们知道 AppStore 审核流程超级久。而由于 React Native 是用的 js 来写的代码，实时编译的过程能让我们实现应用像网页一样做到热更新，随时发布。真正能够做到上架审核一次，永久 0 审核更新。
（7）有效降低移动应用安装包体积
对于普通复杂度的移动应用，使用 React Native 实现的安装包会比原生代码实现的安装包大。而当移动应用功能越复杂，React Native 安装包体积相比原生代码安装包就越小。
比如当原生代码实现的安装包大于 15MB 时，使用 React Native 改写代码后，安装包就小于原生代码实现的安装包。
二、环境配置
基于macOS进行配置。
1.安装软件
Homebrew
Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件。
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Node
brew install node
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
React Native命令行工具
React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。
npm install -g react-native-cli
Watchman
由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。
brew install watchman
Flow
一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误
brew install flow
WebStorm
一款非常优秀的Web开发工具，同样支持React Native开发。
下载地址：https://www.jetbrains.com/webstorm/
Android及iOS开发必备
- Android Studio
- Genymotion
- Xcode
2.测试安装
react-native init FirstApp
cd FirstApp
react-native run-android
react-native run-ios
到此，就可以分别在Android和iOS平台上运行项目。自己在配置过程中，也出现了一些坑。如果配置过程中出现问题，建议google查一下相关解决方案。
三、预备知识
- JavaScript：JavaScript教程
- ES6：ECMAScript 6 入门
准备好这些，终于可以开始学习React Native。目前看React Native还很神秘，接下来继续努力，揭开它神秘的面纱。
网友评论