React Native 开发环境部署

React Native 开发环境部署

简介：

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android 。React Native 让开发者使用 JavaScript 和 React 编写应用，利用相同的核心代码就可以创建 Web，iOS 和 Android 平台的原生应用。注意这里的 核心 两个词，它指的是那些底层的、与界面无关的逻辑。与 ionic / PhoneGap 这类 Web App 开发框架不同，React Native 主张使用 React 的开发方式来开发 Native 应用，因为在现阶段 Web App 还无法达到 Native App 的体验。所以，React Native 并不强调 write Once, run everywhere ，而是 learn once, write everywhere ：上层使用 JS 和 React 开发不同平台的 UI，下层则可以编写能够复用的核心代码，从而大幅提高开发效率。

环境搭建

安装 Homebrew

Homebrew 是一个方便开发者在 MAC OS X 系统上面安装 Linux 工具包的 ruby 脚本，如果你的机器还没有安装 Homebrew ，则需要执行下面的命令安装：

[code]$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"[/code] 
 

完成后可以试试执行 brew -v 检查下 brew 是否安装成功。 

如果你的机器已经安装过 Homebrew ，强烈建议 对 Homebrew 的包做一下更新：

[code]$ brew update && brew upgrade


安装 Node.js 

建议使用 Node 的版本管理器 nvm 来安装新版本的 Node.js 。

安装 nvm(两种方式任选一种) 

首先需要安装 nvm 。官方推荐的做法是通过 curl 或者 wget 来安装： 

通过 curl 安装

[code]$ brew install curl  # 确保安装了 curl
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash


通过 wget 安装

[code]$ brew install wget  # 确保安装了 wget
$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash


完成后可以试试执行 nvm –version 检查下 nvm 是否安装成功。

安装 Node.js

使用 nvm 安装 Node.js：

[code]    $ nvm install node && nvm alias default node


安装 watchman 

watchman 是 Facebook 的一个用于监控文件变更并触发指定操作的工具：

[code]$ brew install watchman


安装 flow 

Flow 是一个 JavaScript 的静态类型检查器，建议安装它，以方便找出代码中可能存在的类型错误：

[code]$ brew install flow


安装 Android SDK

如果你之前已经装过 Android SDK ，打开 Android SDK Manager，确保如下工具和开发包已经安装：

SDK：

Android SDK Build-tools version 23.0.1 

Android 6.0 (API 23) 

Android Support Repository

模拟器：

Intel x86 Atom System Image (for Android 5.1.1 - API 22) 

Intel x86 Emulator Accelerator (HAXM installer)

如果之前没有装过 Android SDK ，可以通过如下步骤安装：

安装最新的 JDK. 

使用 brew install android-sdk 来安装安卓 SDK。 

将它添加到 ~/.bashrc, ~/.zshrc 或者任何其他您的 shell 所使用的路径：export ANDROID_HOME=/usr/local/opt/android-sdk 

启动一个新的 shell 并且运行 android ，在出现窗口中勾选上面列出的 SDK 和模拟器。 

点击 “Install Packages”。 

详细介绍可以参考 官网这篇文章 。

安装 React Native 

最后到了关键一步，安装 React Native：

[code]$ npm install -g react-native-cli


第一个小程序： HelloWorld

执行如下命令生成一个工程：

[code]$ react-native init AwesomeProject


该命令将会下载 React Native 工程源码和依赖,(很慢建议去github clone一个别人的修改)生成的工程文件所示： 

android 

index.android.js 

index.ios.js 

ios 

node_modules 

package.json

[code]node_modules 文件夹，这是 Node.js 用来存放和管理 npm 包的文件夹，现在这里包含了 React Native 框架。
index.android.js 文件和 index.ios.js 文件。这是 React Native CLI 工具分别为 Android 和 iOS 创建的空壳应用。
android 文件夹和 ios 文件夹。包含了用于生成两个平台的 App 的 Bootstrap 型项目。


通过终端，然后执行如下命令运行 Android 应用程序(进去React Native目录)：

[code]$ react-native run-android


React Native 会开始构建这个工程，同时会启动 Running Packager 用于调试。如下图所示： 




 

小小的步伐！！！