title: "React Native 开发环境配置指南（macOS）" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - React Native - Code - Contributors

React Native 开发环境配置指南（macOS）

你是否对原生移动编辑器开发感兴趣？本指南将详细引导你完成环境配置，助你快速上手！

请注意，本指南主要针对 macOS 环境。若需在其他环境中配置，React Native 快速入门文档提供了实用的配置指引和步骤说明。

克隆 Gutenberg

git clone git@github.com:WordPress/gutenberg.git

安装 node 和 npm

如果你同时参与多个 JS 项目，使用一个 node 版本管理器可能比较合适。管理器可以让你在不同版本的 node 和 npm 之间切换。

我们推荐使用 nvm。

安装 nvm 后，在克隆项目的顶级目录中运行以下命令：

nvm install 'lts/*'
nvm alias default 'lts/*' # 将此设置为打开新终端时的默认版本
nvm use # 切换到项目设置

然后安装依赖项：

npm ci

您是否已有较旧的 Gutenberg 代码库？

如果您已有 Gutenberg 代码库，请务必彻底清理 node_modules 并重新安装依赖项。 这有助于避免未来出现错误。

npm run distclean
npm ci

iOS

CocoaPods

CocoaPods 是获取 React 和第三方依赖所必需的。其安装步骤因您机器上 Ruby 的管理方式而异。

系统 Ruby

如果你使用的是 MacOS 自带的默认 Ruby，需要使用 sudo 命令来安装 Cocoapods 等 gem：

sudo gem install cocoapods

注意，Mac M1 与 Cocoapods 不直接兼容。如果遇到问题，可以尝试运行以下命令来安装 ffi 包，这将使 pods 能够以正确的架构安装：

sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

Ruby 管理器

若您使用 Ruby 版本管理器，可能无需手动安装 Cocoapods 或 ffi 包。请查阅所选管理器的文档获取指引。

若您在 WordPress iOS 应用（而非仅演示应用）中运行 Gutenberg，推荐使用 rbenv 作为管理器。

Set up Xcode

Install Xcode via the app store and then open it up:

• Accept the license agreement.
• Verify that Xcode > Preferences > Locations > Command Line Tools points to the current Xcode version.

react-native doctor

react-native doctor can be used to identify anything that's missing from your development environment. From your Gutenberg checkout, or relative to /packages/react-native-editor folder, run:

npx @react-native-community/cli doctor

See if doctor can fix both "common" and "iOS" issues. (Don't worry if "Android" still has ❌s at this stage, we'll get to those later!)

Run the demo app

Once all common and iOS issues are resolved, try:

npm run native start:reset #starts metro

In another terminal type:

npm run native ios

After waiting for everything to build, the demo app should be running from the iOS simulator:

Android

Java 开发工具包 (JDK)

React Native 文档中推荐的 JDK 是 Azul Zulu。可以使用 Homebrew 安装。安装 Homebrew 后，在终端中运行以下命令进行安装：

brew tap homebrew/cask-versions
brew install --cask zulu11

如果您的系统上已安装 JDK，则应为 JDK 11 或更高版本。

Set up Android Studio

To compile the Android app, download Android Studio.

Next, open an existing project and select the Gutenberg folder you cloned.

From here, click on the cube icon that's highlighted in the following screenshot to access the SDK Manager. Another way to the SDK Manager is to navigate to Tools > SDK Manager:

We can download SDK platforms, packages and other tools on this screen. Specific versions are hidden behind the "Show package details" checkbox, check it, since our build requires specific versions for E2E and development:

Check all related packages from build.gradle. Then click on "Apply" to download items. There may be other related dependencies from build.gradle files in node_modules.

If you don’t want to dig through files, stack traces will complain of missing packages, but it does take quite a number of tries if you go through this route.

Update Paths

Export the following env variables and update $PATH. We can normally add this to our ~/.zshrc file if we're using zsh in our terminal, or ~/.bash_profile if the terminal is still using bash.

### Java that comes with Android Studio:
export JAVA_HOME=/Applications/Android\ Studio.app/Contents/jre/Contents/Home
### Android Home is configurable in Android Studio. Go to Preferences > System Settings > Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

Save then source, or open a new terminal to pick up changes.

source ~/.zshrc

or

source ~/.bash_profile

If the SDK path can't be found, you can verify its location by visiting Android Studio > Preferences > System Settings > Android SDK

Create a new device image

Next, let’s create a virtual device image. Click on the phone icon with an android to the bottom-right.

This brings up the “Android Virtual Device Manager” or (AVD). Click on “Create Virtual Device”. Pick a phone type of your choice:

Pick the target SDK version. This is the targetSdkVersion set in the build.gradle file.

There are some advanced settings we can toggle, but these are optional. Click finish.

Run the demo app

Start metro:

npm run native start:reset

In another terminal run the following to launch the demo app in the Android emulator (if the emulator isn't already running, it'll also be launched as part of this command):

npm run native android

After a bit of a wait, we’ll see something like this:

Unit Tests

npm run test:native

Integration Tests

Appium has it own doctor tool. Run this with:

npx appium-doctor

Resolve any required dependencies.

iOS Integration Tests

If we know we can run the iOS local environment without issue, E2Es for iOS are straightforward. Stop any running metro processes. This was launched previously with npm run native start:reset.

Then in terminal type:

npm run native test:e2e:ios:local

Passing a filename should also work to run a subset of tests:

npm run native test:e2e:ios:local gutenberg-editor-paragraph.test.js

If all things go well, it should look like:

Android Integration Tests

Create a new virtual device() that matches the device specified in packages/react-native-editor/device-tests/helpers/caps.js At the time of this writing, this would be a Pixel 3 XL image, using Android 9 (API 28).

Start the virtual device first. Go back to the AVD by clicking on the phone icon, then click the green play button.

Make sure no metro processes are running. This was launched previously with npm run native start:reset.

Then in a terminal run:

npm run native test:e2e:android:local

Passing a filename should also work to run a subset of tests:

npm run native test:e2e:android:local gutenberg-editor-paragraph.test.js

After a bit of a wait we should see: