title: "基于 React Native 的移动版 Gutenberg 入门指南" post_status: publish comment_status: open taxonomy: category: - gutenberg-docs post_tag: - React Native - Code - Contributors

基于 React Native 的移动版 Gutenberg 入门指南

欢迎！这是面向 Android 和 iOS 设备的区块编辑器原生移动移植版的入门指南。总体而言，它是一个用于新建或现有父级应用的 React Native 库。继续阅读以了解如何构建、测试和运行它。

前置要求

为了获得更接近项目维护者当前使用的开发体验，请确保已安装以下工具：

git
nvm
Node.js 和 npm（使用 nvm 安装它们）
Android Studio 以便能够编译应用的 Android 版本
Xcode 以便能够编译 iOS 应用
CocoaPods (sudo gem install cocoapods) 用于获取 React 和第三方依赖项。

请注意，维护者使用的操作系统平台是 macOS，但这些工具和设置在其他平台也应可用。

克隆项目

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

设置

请注意，此处描述的命令应在克隆项目的顶级目录中运行。在运行演示应用之前，您需要下载并安装项目依赖项。这通过以下命令完成：

nvm install
npm ci
npm run native preios

运行

npm run native start:reset

在开发模式下运行打包器（Metro）。打包器将持续运行，为请求它的客户端提供应用包。

在打包器运行的同时，打开另一个终端窗口，使用以下命令编译并运行 Android 应用：

npm run native android

应用现在应该在已连接的设备或正在运行的模拟器中打开，并从正在运行的打包器获取 JavaScript 代码。

要使用默认模拟器设备编译并运行 iOS 版本的应用，请使用：

npm run native ios

如果您使用的是 Mac 并已安装 iOS 模拟器，此命令将尝试在 iOS 模拟器中打开您的应用。

在其他 iOS 设备模拟器上运行

要在不同的设备模拟器上编译并运行应用，请使用以下命令，注意使用两组 -- 将模拟器选项传递给 react-native CLI。

npm run native ios -- -- --simulator="DEVICE_NAME"

例如，如果你想在 iPhone Xs Max 上运行，可以尝试：

npm run native ios -- -- --simulator="iPhone Xs Max"

要查看所有可用的 iOS 设备列表，请使用 xcrun simctl list devices。

自定义演示编辑器

默认情况下，演示编辑器会渲染大多数受支持的核心区块。这有助于展示编辑器的功能，但在专注于特定区块或功能时可能会分散注意力。您可以通过在 packages/react-native-editor/src/setup-local.js 文件中利用 native.block_editor_props 钩子来自定义编辑器的初始状态。

示例 setup-local.js

/**
 * WordPress 依赖项
 */
import { addFilter } from '@wordpress/hooks';

export default () => {
    addFilter(
        'native.block_editor_props',
        'core/react-native-editor',
        ( props ) => {
            return {
                ...props,
                initialHtml,
            };
        }
    );
};

const initialHtml = `
<!-- wp:heading -->
<h2 class="wp-block-heading">仅一个标题</h2>
<!-- /wp:heading -->
`;

故障排除

如果 Android 模拟器无法正常启动，或编译时出现 Could not initialize class org.codehaus.groovy.runtime.InvokerHelper 等类似错误，建议根据 React Native 文档中的最新要求，仔细检查开发环境的配置。例如，使用 Android Studio 时，需要配置 ANDROID_HOME 环境变量，并确保 JDK 版本符合最新要求。

有时，尤其是在调整 package.json、Babel 配置（.babelrc）或 Jest 配置（jest.config.js）时，修改可能看似未按预期生效。此时，可能需要停止 Metro 打包进程，并使用 npm run native start:reset 重新启动。其他情况下，可能需要彻底重新安装 NPM 包，此时 npm run native clean:install 脚本会很有用。

使用 Visual Studio Code 进行开发

虽然开发 gutenberg-mobile 不强制要求使用 Visual Studio Code，但它是推荐的 IDE，我们为其提供了一些配置。

首次在 Visual Studio 中打开项目时，系统会提示安装一些推荐的扩展。这将有助于类型检查和调试等工作。

我们使用的扩展之一是 React Native Tools。它允许你从 VSCode 运行打包程序，或在 iOS 或 Android 上启动应用程序。它还添加了一些调试配置，以便你可以设置断点并直接从 VSCode 调试应用程序。详情请参阅扩展文档。

单元测试

使用以下命令运行测试套件：

npm run test:native

它将在您的测试上运行 jest 测试运行器。测试在桌面环境下针对 Node.js 运行。

要在调试器支持下运行测试，请使用以下 CLI 命令启动：

npm run test:native:debug

然后，在 Chrome 中打开 chrome://inspect 以附加调试器（查看"远程目标"部分）。在测试/开发过程中，可以随时在希望调试器中断的代码中的任何位置添加 debugger 语句。

编写和运行单元测试

本项目已配置使用 jest 进行测试。您可配置任意测试策略，但 jest 已开箱即用。在名为 __tests__ 的目录中创建测试文件，或使用 .test.js 扩展名，即可让 jest 加载这些文件。查看示例测试请访问此处。jest 文档和 React Native 测试教程也是极佳的资源。

端到端测试

除了单元测试外，Mobile Gutenberg (MG) 项目还依赖端到端 (E2E) 测试，以在与最终用户相似的环境中自动化测试关键流程。我们通常更倾向于单元测试，因为它们速度快且易于维护。然而，对于需要操作系统级功能（例如复杂手势、文本选择）或视觉回归测试（例如深色模式、对比度级别）的断言，我们使用 E2E 测试。

E2E 测试位于 packages/react-native-editor/__device-tests__ 目录中。有关运行这些测试和为其做出贡献的更多文档，可在 tests 目录中找到。