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

注意： React Native 移动编辑器目前在 trunk 分支上已停止维护，并且已知在升级到 React 19 (#61521) 后会出现故障。要构建一个可用的演示应用或修补现有的 Gutenberg Mobile 构建版本，请检出最新的 React Native 发布版——标签 rnmobile/1.121.0 位于提交 e63b8b8 (参见 #63744) ——并在此基础上开展工作。有关详细信息，请参阅项目状态通知。

先决条件

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

  • 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 Simulator，这将尝试在 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。

自定义演示编辑器

默认情况下，Demo editor 渲染大多数支持的核心区块。这对于展示编辑器的功能很有帮助，但在专注于特定区块或功能时可能会造成干扰。人们可以通过利用 packages/react-native-editor/src/setup-local.js 文件中的 native.block_editor_props hook 来自定义编辑器的初始状态。

示例 setup-local.js
/**
 * WordPress dependencies
 */
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">Just a 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 bundler 进程并使用 npm run native start:reset 重新启动它。其他时候，您可能希望从头重新安装 NPM 包，此时 npm run native clean:install 脚本会派上用场。

使用 Visual Studio Code 进行开发

虽然您不需要使用 Visual Studio Code 来开发 gutenberg-mobile，但它是推荐的 IDE，并且我们为其提供一些配置。

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

我们正在使用的扩展之一是 React Native Tools。这允许您从 VSCode 运行打包器或在 iOS 或 Android 上启动应用程序。它还添加了一些调试配置，因此您可以直接在 VSCode 中设置断点并调试应用程序。更多详细信息请查看扩展文档。

单元测试

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

npm run test:native

它将在桌面端针对 Node.js 运行您的测试，使用 jest 测试运行器。

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

npm run test:native:debug

然后，在 Chrome 中打开 chrome://inspect 以附加调试器（查看“Remote Target”部分）。在测试/开发过程中，随意在您希望调试器中断的代码中的任意位置插入 debugger 语句。

编写和运行单元测试

该项目设置为使用 jest 进行测试。您可以配置任何喜欢的测试策略，但 jest 开箱即用。创建名为 __tests__ 的目录中的测试文件或带有 .test.js 扩展名的文件，以便 jest 加载这些文件。这里有一个测试示例。jest 文档也是一个很好的资源，React Native 测试教程也是如此。

端到端测试

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

E2E 测试位于 packages/react-native-editor/__device-tests__ 目录中。关于运行这些测试及贡献代码的其他文档可在测试目录中找到。