工具
我使用的运行 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
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
6 . 测试。
修改项目根目录下的 index.android.js
文件中的内容,然后在 Android 模拟器中双击 R
键刷新,如果界面发生了变化说明开发环境没有问题。