基于React Native的移动Gutenberg入门

欢迎！这是块编辑器本机移动端口的入门指南，针对Android和iOS设备。总的来说，它是一个React Native库，可用于父级绿地或棕地应用程序。继续阅读有关如何构建、测试和运行它的信息。

前提条件

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

吉特
非挥发性物质
Node.js和npm（使用nvm安装它们）
安卓工作室能够编译Android版本的应用程序
X代码能够编译iOS应用程序
可可荚(sudogem安装cocoapods)需要获取React和第三方依赖项。

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

克隆项目

git克隆https://github.com/WordPress/gutenberg.git

设置

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

nvm安装npm-ci公司npm运行本机preios

运行

npm运行本机启动：重置

在开发模式下运行打包程序（Metro）。打包程序保持运行状态，将应用程序包提供给请求它的客户端。

运行packager后，打开另一个终端窗口，使用以下命令编译并运行Android应用程序：

npm运行本机android

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

要编译和运行应用程序的iOS变体，请使用违约模拟器设备，使用：

npm运行本机ios

如果你在Mac上并安装了应用程序，它将尝试在iOS模拟器中打开你的应用程序。

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

要使用不同的设备模拟器编译和运行应用程序，请使用以下命令，注意--将模拟器选项传递给反应阳性CLI。

npm运行本机ios-----simulator=“DEVICE_NAME”

例如，如果您想在iPhone Xs Max中运行，请尝试：

npm运行本机ios-----simulator=“iPhone Xs Max”

要查看所有可用iOS设备的列表，请使用xcrun-simctl列出设备.

自定义演示编辑器

默认情况下，演示编辑器会呈现大多数受支持的核心块。这有助于展示编辑器的功能，但在关注特定块或功能时可能会分散注意力。可以利用本机.block_editor_props钩住包/react-native-editor/src/setup-local.js文件。

setup-local.js示例

/***WordPress依赖项*/从“@wordpress/hooks”导入{addFilter}；导出默认值（）=>{添加筛选器('本机.block_editor_props'，'核心/反应编辑器'，（道具）=>{返回{…道具，首字母Html，};});};const initialHtml=`<!-- wp:标题--><h2 class=“wp-block-heading”>只是一个标题</h2><!-- /wp:标题-->`;

故障排除

如果Android模拟器没有正确启动，或者编译失败无法初始化类org.codehaus.groovy.runtime。调用帮助程序或者类似的，它可能有助于根据中的最新要求重新检查开发环境的设置React Native的文档。例如，使用Android Studio，您需要配置安卓_豪斯并确保您的JDK版本符合最新的要求。

有时，特别是在调整package.json包，巴别塔配置(巴贝尔rc)或Jest配置(jest.config.js)，您的更改可能未按预期生效。在这种情况下，您可能需要停止metro bunder进程并用npm运行本机启动：重置。其他时候，您可能需要从头开始重新安装NPM包npm运行本机清理：安装脚本可能很方便。