6.5 KiB
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 设备模拟器上运行
要使用其他设备模拟器编译并运行应用，请使用以下命令。注意使用双 -- 将模拟器选项传递给 react-native CLI：
npm run native ios -- -- --simulator="设备名称"
例如，如果要在 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 进行开发
虽然不要求必须使用 Visual Studio Code 来开发 gutenberg-mobile，但它是推荐的 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__ 目录中。有关运行和贡献这些测试的其他文档，请参阅测试目录。