ReactNative的历史

React Native是在React框架的基础上扩展的用于移动应用开发的框架。React是用于构建UI的JavaScript库，由Facebook在2013年5月开源，主要用于Facebook和Instagram网站的UI构建。React由于其革命性的设计思想，优秀的性能，已经由单纯的JavaScriptUI库，逐渐演变为完整的Web端解决方案，正受到越来越多前端工程师的青睐。

React Native继承了React的核心理念，通过对原生组件的封装，进一步扩展为支持移动应用开发的JavaScript库。在2015年3月，Facebook首先开源支持IOS平台的React Native，随后在2015年10月，增加支持Android平台。

至此不论是IOS还是Android的小伙伴都可以用React Native愉快的开发应用了。

React Native以JavaScript作为核心开发语言，通过CSS实现布局与样式，使用JSX标签表示UI组件。

React Native不是基于WebView构建的WebAPP。React Native通过IOS和Android平台的JavaScriptCore.Framework，实现JavaScript与原生代码的交互。通过JavaScript驱动原生代码来构建APP，从而获得与原生代码开发的应用一致的优秀体验。

React Native的优势

如果说React Native只是单纯的让不同平台的工程师可以通过JavaScript语言开发移动应用，实现所谓的write once,run anywhere。那么它与之前WebAPP或者hybridAPP的框架没有什么区别。

React Native的优秀之处在于其吸取了各家跨平台解决方案的优点然后融于一体。

• 通过JavaScript驱动原生代码，实现非常接近原生应用的体验；
• 统一的开发语言和框架打破不同平台语言和机制不通用必须分别开发的障碍；
• 更具革命性的是React Native基于React的设计思想，通过虚拟DOM、单向数据流，为我们带来了更加简单高效的开发体验。

就如Facebook官方宣称的

Learn once,write anywhere

的口号一样。

只需要学习React Native，我们就能够编写针对不同平台的应用，并且使用React Native框架开发相较于原生代码开发应用，更简单更高效。

React Native另一个重要的优势就是热更新。

通过React Native框架我们能够实现应用任意模块的更新，而不需要用户通过各种渠道下载安装包重新安装。修复线上bug也会变的非常及时。并且对应用的更新可以在静默的状态下完成，省去让用户等待的时间。

React Native目前存在的问题

如果说ReactNative有什么劣势的话，首先就是学习成本比较高。

学习成本不仅仅包括需要学习React Native框架的使用，还包括对于不同平台原生应用开发能力的掌握。

由于目前的React Native框架还无法完全脱离原生代码独立完成大型应用的开发，所以要求开发人员即熟悉React Native框架的运用又有原生应用开发的经验。

React Native目前存在的问题：
虽然Facebook官方宣传React Native具有原生应用相差无几的用户体验。但是实际开发中发现在一些对性能要求较高的情况下，React Native构建的UI在滑动过程中有明显的卡顿，远远不能达到60FPS的要求。

其次React Native框架目前仍然存在一些性能问题，比如ListView内存泄露的问题。而且React Native框架开发的应用通常要比原生应用占用更多的内存和CPU，这也意味着通过React Native构建的应用更耗电。

最后React Native作为一个刚刚开源的框架，虽然在github的热度很高，但是可用的UI组件不够丰富。第三方组件良莠不齐，很多组件都存在不同平台无法适配的问题。这也直接导致，尽管React Native是一个能够用于跨平台开发的框架，但是为保证一致的用户体验在一些情况下不得不针对不同平台编写不同的代码。

未来的憧憬

虽然目前React Native仍然存在诸多问题，但这依然无法掩盖其作为一个非常优秀的前端框架的光芒。三端一体已经逐渐成为未来的趋势。React Native是在这个趋势浪潮中非常优秀的一次尝试。React Native团队也在不断优化该框架，越来越多的个人开发者和公司也在尝试使用React Native开发应用，开源社区的每个人都在贡献着自己的力量，相信不久的将来React Native会变得更加完善。

React Native开发环境搭建

在搭建React Native开发环境之前，有几点需要说明。
一、本系列教程的所有内容都在Mac OS X下完成。
二、本系列教程的所有示例代码都是以开发IOS应用为前提完成，通常不涉及Android应用开发的相关知识。
三、应用原生部分的代码使用Objective-C语言编写完成。
四、React Native在有时也会缩写为RN，表达的意思是一致的。

搭建开发环境

一、安装Homebrew。Homebrew是Mac OSX的包管理器，我们需要通过Homebrew安装开发React Native的相关软件包。
如果不知道怎样安装Homebrew可以点这里：官网。根据官网的介绍安装即可。

二、安装Node.js。

$brew install node

三、安装watchman。watchman是Facebook用于监视JavaScript文件改动的开源项目。

$brew install watchman

四、安装flow。flow是Facebook开源的一个JavaScript静态类型检查器，用于发现JavaScript程序中的类型错误。

$brew install flow

五、安装react-native-cli。react-native-cli是React Native的命令行工具，安装react-native-cli后我们就能够通过react-native相关命令管理ReactNative工程。

$npm install -g react-native-cli

六、最后需要安装Xcode，如果你的电脑没有安装Xcode，请到AppStore下载最新版本。切记不要从任何第三方渠道下载！

注意
npm，是Node.js的模块依赖管理工具。React Native源代码以及开发React Native应用用到的第三方组件都可以通过npm进行下载安装。

第一个React Native工程

一、可以通过react-native init命令创建一个React Native工程。

$react-native init ReactNativeLearn

选择一个目录位置，执行上述命令，终端出现如下信息说明工程已经创建完毕。

React Native-创建工程.png

注意
1、因为要从npm下载React Native的源代码，可能需要等待一会。如果长时间没有反应，建议翻墙。也可以将npm替换为国内镜像：

$npm config set registry https://registry.npm.taobao.org --global
$npm config set disturl https://npm.taobao.org/dist --global

2、对于已经安装过Node.js的同学，可能会提示node版本过低。这时需要运行：

$brew upgrade node

更新Node到最近版本。

3、可以通过nvm，查看当前系统安装的Node版本。

$nvm ls

React Native-NVM.png

二、ReactNativeLearn就是我们创建的工程的名称。到ReactNativeLearn工程同名的目录下，进入ios目录，用Xcode打开ReactNativeLearn工程，⌘+R运行。这时可以看到终端启动并且输出服务器启动的相关信息。

等待模拟器启动，可以看到一个Welcome to React Native界面，说明我们已经成功创建第一个ReactNative工程。

React Native--UI.png

三、通过react-native init创建的工程已经预置了简单的模板代码，可以打开项目根目录下的index.ios.js文件看到创建上述界面的代码。

IDE

工欲善其事必先利其器！想要和React Native愉快的玩耍怎么能没有一款终极的代码编辑器呢。这里向大家推荐两款编辑器，大家可以根据个人喜好自由选择。

Atom

Atom，是由github团队打造的一款开源免费的代码编辑器。进入到官网点击Download，下载安装即可。Atom的官网可能需要翻墙，请小伙伴们自备梯子。

如果用过Sublime Text ，那么可以很容易的掌握Atom的基本用法。Atom提供类似于Package Control的插件机制，可以通过插件管理器安装丰富的插件。

Nuclide

Nuclide，是Facebook官方提供用于开发React Native应用的IDE。由于Nuclide基于Atom编辑器，我们只要像安装Atom插件一样安装Nuclide即可。

启动Atom，选择Preferences，选择Settings，选择Install。

Nuclide.png

在Install Packages下方的搜索框选中Packages选项，在搜索框内输入Nuclide，然后回车，找到Nuclide，点击install即可。

也可以直接在终端安装Nuclide。启动终端，输入如下命令回车即可：

$apm install Nuclide

其他插件也可以通过上述两种方式安装。同时你也可以在Atom官网Packages搜索需要的插件。

为Atom安装主题

Atom->Preferences->Settings->Themes

Atom主题.png

Atom预置了几个酷炫的主题，我们可以在UI Theme选择Atom编辑器的主题，在Syntax Theme选择代码主题。同时Atom支持安装第三方主题，可以在Atom->Preferences->Settings->Install安装喜欢的其他主题。同时你也可以在Atom官网Themes搜索喜欢的主题。

Atom插件

这里介绍几个平时常用的插件包。

minimap

对Sublime Text的minimap功能念念不忘？Atom也可以！通过安装minimap，也可以为Atom添加代码地图的功能。

$apm install minimap

minimap.png

highlight-selected

highlight-selected高亮你选中的代码，同时高亮编辑区域内所有相同的代码。

$apm install highlight-selected

highlight-selected.gif

minimap-highlight-selected

在minimap高亮显示选中的的代码。

$apm install minimap-highlight-selected

pigments

根据颜色值，在旁边显示一个对应颜色的小图标或者直接显示为背景。

$apm install pigments

pigments.gif

color-picker

顾名思义。

$apm install color-picker

color-picker.gif

更多好用的插件，大家可以自己探索！最后要说的是如果非要说出Atom的缺点的话，那就是相对于Sublime Text，Atom的启动速度要慢很多（固态硬盘可以无视）。

Deco IDE

Deco IDE，是一款专门用于开发React Native应用的IDE。开源免费，目前只有Mac版本。Deco IDE除支持React Native语法高亮，代码自动补全功能之外，还支持拖拽ReactNative组件到编辑区生成相应代码；通过属性配置面板设置组件样式的功能，以及内置的Console，快捷启动模拟器等方便的小功能。

可以在这里找到Deco IDE的完整使用教程。

Deco IDE目前仍然是beta版本，功能单一，缺少第三方扩展。

到此为止，我们已经完成开发React Native应用的准备工作，之后的教程我将和大家一起开发一款简单的React Native应用，希望能够通过该应用的开发，使大家快速掌握React Native的基础知识。