ReactNative

一、ReactNative简介

ReactNative是移动端目前最热的框架之一, 着力于提高多平台开发的开发效率 —— 仅需学习一次，编写任何平台。(Learn once, write anywhere)。Facebook 已经在多项产品中使用了React Native，并且将持续地投入建设React Native。React Native 可以通过更新远端JS，直接更新app, 用 JavaScript 调起 native 组件，将增强与高性能组件交给 native 来处理 . 相比其他 hybrid 框架而言, ReactNative并非通过 webview 来调用原生组件,而是直接调用操作系统自带的 javascriptCore, 所以更高效。

二、环境搭建

如果英文好的可以查看 React Native官方文档 ,官方网站会提供最新的安装参考。

React Native 主要依赖以下环境:

• Mac OS X操作系统
• Xcode, 推荐使用7.3.0或者更高版本。
• Node.js V6.2.1或者最新版本。
• watchman和flow。
• NVM

下面图文结合详细介绍下 React Native 在 Mac 环境下的安装流程, 带你一步步搭建环境, 运行 第一个项目 Hello World.

注: 安装过程请时刻保持翻墙状态 !!!

2.1 安装Xcode

不多说了，AppStore直接

2.2 安装Node.js

打开 Node.js官网, 直接下载.

node.js

2.3. 安装Homebrew

打开 Homebrew官网, 语言选择简体中文, 按照文档步骤进行安装即可.

2.4. 通过brew安装watchman和flow

React Native 包管理器使用了watchman ，flow是 Facebook 公司出品的一个类型检查库，它同样被 React Native 所采用.

如果安装过程中遇到问题，你可能需要更新 brew 和相关依赖包, 使用的命令行： brew update brew upgrade. 如果出现错误，你需要修复本地的brew 安装程序，brew doctor 可以帮助你找到问题所在。

安装好Homebrew 之后，依次运行以下命（比较耗时时）：

2.4.1 检查brew版本

• brew -v

2.4.2 安装watchman

• brew install watchman

2.4.3 安装flow

• brew install flow

2.5. 安装react-native-cli命令行工具

接下来我们通过NPM安装反应母语-CLI的命令行工具。在MAC终端中输入如下命令，其中-g表示全局安装。

sudo npm install -g react-native-cli

这个步骤将会在你的系统全局安装 React Native 命令行工具。

2.6. 安装NVM

Reace Native 使用nvm管理不同的node和npm.

2.6.1 在终端输入命令安装NVM:

git clone [https://github.com/creationix/nvm](https://github.com/creationix/nvm)

2.6.2 进入nvm文件

在终端依次输入以下命令:

cd nvm/
ls
source nvm.sh
nvm
nvm ls -remote N/A
nvm ls

2.7. 创建项目

搭建好RN环境以后，我们来创建一个HelloWorld项目。

• 首先在桌面上创建一个名为 rn_demo 的文件夹
• 在终端进入创建的文件夹 (cd)
• 创建项目

2.8 打开项目并运行

打开项目 运行结果

2.9 打开App.js编程

项目运行起来, 打开App.js就可以进行编程了, 编程了直接 command+R运行即可.

image app.js

三、总结

到此为止 React Native 环境已经搭建好了, 并可以进行 React Native 的开发啦

参考引用：
博客
reactnative中文网