基于 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 目录 中找到。