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 ，则需要执行下面的命令安装：

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

完成后可以试试执行 brew -v 检查下 brew 是否安装成功。
如果你的机器已经安装过 Homebrew ，强烈建议对 Homebrew 的包做一下更新：

$ brew update && brew upgrade

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

安装 nvm(两种方式任选一种)
首先需要安装 nvm 。官方推荐的做法是通过 curl 或者 wget 来安装：
通过 curl 安装

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

通过 wget 安装

$ 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：

$ nvm install node && nvm alias default node

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

$ brew install watchman

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

$ 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：

$ npm install -g react-native-cli

第一个小程序： HelloWorld

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

$ react-native init AwesomeProject

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

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目录)：

$ react-native run-android

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

小小的步伐！！！

React Native 开发环境部署

React Native 开发环境部署

相关文章