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 用于调试。如下图所示:
小小的步伐!!!