React Native 上手 - 1.搭建开发环境

React Native

工具

我使用的运行 macOS 的 Macbook 电脑，React Native 支持 macOS、Linux 和 Windows 操作系统，但是只有在 macOS 环境下可以编译和测试 iOS 项目。

之后的操作步骤中，都会以 macOS 操作系统下的操作为主。

安装 React Native

0 . 安装 Homebrew。直接在终端中运行以下命令（为区分终端的输入与输出，在输入命令前会有 $ 符号，实际输入时请忽略，下同）：

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

1 . 安装 [Node.js](/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)")，watchman：

$ brew install node
$ brew install watchman

安装 Node.js 的同时，npm 也会被安装，npm 是 Node.js 的包管理工具。

2 . 安装 React Native 的命令行工具：

$ npm install -g react-native-cli

安装 iOS 构建工具

1 . 前往 Mac App Store 下载 Xcode。

2 . 创建 React Native 工程，并在 iOS 环境下运行：

$ react-native init AwesomeProject
$ cd AwesomeProject
$ react-native run-ios

iOS 模拟器中的运行效果

3 . 测试。

修改项目根目录下的 index.ios.js 文件中的内容，然后在 iOS 模拟器中按下 Command⌘ + R 键刷新，如果界面发生了变化说明开发环境没有问题。

安装 Android Studio 构建工具

1 . 安装 Android Studio，Android Studio 提供了 Android SDK 和 Android 虚拟机。运行 Android Studio 之前需要安装 Java SE Development Kit(JDK)，可以通过在终端中执行 $ javac -version 命令来验证 JDK 的安装。

安装 Android Studio 时要记得勾选以下安装项：

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

如果之前已经安装了 Android Studio 并且没有安装 HAXM，也可以单独进行安装。

2 . 安装 Android 6.0 (Marshmallow) 的 SDK。

打开 Android Studio ，在 Preferences 中找到 Appearance & Behavior → System Settings → Android SDK。

打开 SDK Platform 选项卡，勾选右下角的 Show Package Details，在列表中勾选以下选项：

Google APIs
Intel x86 Atom System Image
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

打开 SDK Tools 选项卡，勾选右下角的 Show Package Details，在列表中勾选以下选项：

Build-Tools 23.0.1

点击 Apply 按钮并执行后面的安装操作。

3 . 配置一下环境变量：

$ export ANDROID_HOME=${HOME}/Library/Android/sdk
$ export PATH=${PATH}:${ANDROID_HOME}/tools
$ export PATH=${PATH}:${ANDROID_HOME}/platform-tools

注意，如果你电脑中的 Android SDK 是通过 Homebrew 安装的，要把环境变量 ANDROID_HOME 配置为 /usr/local/opt/android-sdk。

4 . 通过终端打开虚拟设备管理器：

$ android avd

创建，并启动一台安卓虚拟机。

5 . 创建 React Native 工程，并在 Android 环境下运行：

$ react-native init AwesomeProject
$ cd AwesomeProject
$ react-native run-android

Android 模拟器中的运行效果

6 . 测试。

修改项目根目录下的 index.android.js 文件中的内容，然后在 Android 模拟器中双击 R 键刷新，如果界面发生了变化说明开发环境没有问题。

下一篇：React Native 上手 - 2.属性和状态