React Native搭建开发环境

油菜花花花
717 阅读4分钟
原文链接： reactnative.cn

欢迎使用React Native！这篇文档会帮助你搭建基本的React Native开发环境。如果你已经搭好了环境，那么可以尝试一下编写Hello World。

根据你所使用的操作系统、针对的目标平台不同，具体步骤有所不同。如果想同时开发iOS和Android也没问题，你只需要先选一个平台开始，另一个平台的环境搭建只是稍有不同。

如果阅读完本文档后还碰到很多环境搭建的问题，我们建议你还可以再看看由本站提供的环境搭建视频教程(macOS iOS、macOS Android、 windows Android)、windows环境搭建文字教程、以及常见问题。

目标平台： iOS Android 开发平台： macOS Linux Windows

安装#

必需的软件#

Node#

打开终端窗口，输入下面的命令来安装NodeJS:

sudo apt-get install -y build-essential
curl -sL https://deb.nodesource.com/setup_5.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo ln -s /usr/bin/nodejs /usr/bin/node

Yarn、React Native的命令行工具（react-native-cli）#

Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源：

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）： sudo npm install -g yarn react-native-cli.

Android Studio#

Android Studio 2.0 or higher.

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到 官网上下载。 或是使用包管理器来安装（比如choco install jdk8或是 apt-get install default-jdk）

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

安装过程中有一些需要改动的选项：

  • 选择Custom选项：

custom installation

  • 选择Android Virtual Device

additional installs

  • 安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。

configure sdk

  • 在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

platforms

  • 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须是这个版本）。然后还要勾选最底部的Android Support Repository.

build tools

ANDROID_HOME环境变量#

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

具体的做法是把下面的命令加入到~/.bashrc、~/.bash_profile文件中。如果你使用的是其他的shell，则选择对应的配置文件:

# 如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk

然后使用下列命令使其立即生效（否则重启后才生效）： 

source ./bash_profile

可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

推荐安装的工具#

Watchman#

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager可以快速捕捉文件的变化从而实现实时刷新）。

安装watchman还可以避免node的一个与文件监视有关的bug。

在终端中输入以下命令来编译并安装watchman:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.5.0  # 这是本文发布时的最新版本
./autogen.sh
./configure
make
sudo make install

Flow#

Flow是一个静态的JS类型检查工具。译注：你在很多示例中看到的奇奇怪怪的冒号问号，以及方法参数中像类型一样的写法，都是属于这个flow工具的语法。这一语法并不属于ES标准，只是Facebook自家的代码规范。所以新手可以直接跳过（即不需要安装这一工具，也不建议去费力学习flow相关语法）。

在终端中输入以下命令来安装flow:

npm install -g flow-bin

Gradle Daemon#

开启Gradle Daemon可以极大地提升java代码的增量编译速度。

touch ~/.gradle/gradle.properties && echo "org.gradle.daemon=true" >> ~/.gradle/gradle.properties

Android模拟器加速器#

在安装Android Studio时你可能会看到下面这样的提示：

accelerator

如果你的系统支持KVM，那就应该安装Intel的Android模拟器加速器。

将Android SDK的Tools目录添加到PATH变量中#

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

在~/.bashrc或是~/.bash_profile文件中添加：

# 你的具体路径可能有所不同，请自行确认。
PATH="~/Android/Sdk/tools:~/Android/Sdk/platform-tools:${PATH}"
export PATH

可选的安装项#

Git#

使用包管理器来安装Git (例如sudo apt-get install git-all).

Nuclide#

Nuclide（此链接需要科学上网）是由Facebook提供的基于atom的集成开发环境，可用于编写、运行和 调试React Native应用。

点击这里阅读Nuclide的入门文档。

译注：我们更推荐使用WebStorm或Sublime Text来编写React Native应用。

Genymotion#

比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。

  1. 下载和安装Genymotion（genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择）。
  2. 打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装。
  3. 创建一个新模拟器并启动。
  4. 启动React Native应用后，可以按下F1来打开开发者菜单。

测试安装# 

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

提示：你可以使用--version参数创建指定版本的项目。例如react-native init MyApp --version 0.39.2。注意版本号必须精确到两个小数点。

Windows用户请注意，请不要在命令行默认的System32目录中init项目！会有各种权限限制导致不能运行！

修改项目#

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

  • 使用你喜欢的文本编辑器打开index.android.js并随便改上几行
  • 按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是⌘+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。
  • 在终端下运行adb logcat *:S ReactNative:V ReactNativeJS:V可以看到你的应用的日志。

完成了！#

恭喜！你已经成功运行并修改了你的第一个React Native应用。

接下来#

avatar
文章
阅读
粉丝