当前位置：首页 > news >正文

TYZRNEditor踩坑指南：XIB打包失败与无法发布npm的解决方案

news 2026/8/16 18:01:25

TYZRNEditor踩坑指南：XIB打包失败与无法发布npm的解决方案

【免费下载链接】Blum-auto-botBlum-auto-bot项目地址: https://gitcode.com/gh_mirrors/blumauto/Blum-auto-bot

TYZRNEditor 是一款将 React Native 与原生 iOS UI 深度结合的富文本编辑器与 Markdown 编辑器组件，它的作者在封装过程中遇到了一个教科书级的"坑"：打包静态库时 XIB 文件无法打包，导致组件无法发布到 npm 使用。这篇踩坑指南将完整复盘问题根源，并给出新手也能照做的 3 种引入方案与完整的 XCode 配置步骤，帮你避开同样的发布陷阱。

TYZRNEditor 是什么？为什么值得用它

简单来说，TYZRNEditor 是运行在 iOS 上的 React Native 富文本编辑器，它同时内置了两套编辑能力：

富文本编辑器：基于 WordPress-Editor-iOS 封装，支持加粗、斜体、标题、列表、引用、插入图片/视频等完整排版能力；
Markdown 编辑器：基于 Moleskine 与 MMMarkdown 封装，支持 Markdown 语法高亮与实时预览。

它没有重复造轮子，而是站在 AFNetworking、CocoaLumberjack、MMMarkdown 等成熟库的肩膀上，把它们整合成可直接供 RN 调用的原生组件，核心封装代码可以参考TYZRNEditor/ios/TYZRNEditor/下的TYZRNEditorViewController.m与TYZRNEditorViewManager.m。

踩坑回顾：XIB 打包失败是怎么回事

作者在 README 中直白地承认："由于在打包静态库时发生 XIB 文件无法打包的问题，导致暂时无法发布到 npmjs 使用"。

这个问题的本质是：项目中的界面资源（如LaunchScreen.xib、WPEditorFormatbarView.xib）依赖 XIB 文件，而 XIB 属于资源文件而非源码。当你把组件打包成 iOS 静态库（.a）发布到 npm 时，静态库默认只编译 Objective-C 源码，XIB 等资源文件并不会被自动携带进产物，最终导致使用者拿到包后界面资源缺失、运行即崩溃或白屏。

无法发布 npm 的直接后果

由于资源打包问题没有解决，TYZRNEditor 的 npm 发布计划被迫搁置（package.json中版本仍停留在0.0.1）。这意味着你不能像普通 RN 组件那样一行npm install搞定，而是需要走"源码级引入"的路线。

不过换个角度看，这也逼出了更稳妥、更透明的接入方式——直接把工程源码引入项目，资源文件完整可见，反而不容易出幺蛾子。

解决方案一：直接下载工程引入（推荐）

最简单的方式是克隆整个仓库源码：

git clone https://gitcode.com/gh_mirrors/blumauto/Blum-auto-bot

然后按 README 的指引，把TYZRNEditor/TYZRNEditorView.js与TYZRNEditor/TYZRNMKEditor.js两个 RN 组件文件复制到你工程的相应目录即可。

解决方案二：手动复制 JS 组件

如果你只需要其中一个编辑器，可以只复制对应文件：

富文本编辑器：复制TYZRNEditor/TYZRNEditorView.js；
Markdown 编辑器：复制TYZRNEditor/TYZRNMKEditor.js。

JS 组件内部通过requireNativeComponent与原生管理器通信，例如TYZRNEditorView.js中的RCTMyEditorView = requireNativeComponent('TYZRNEditorView', TYZRNEditorView)，所以原生侧代码必须同时加入工程，两者缺一不可。

最快配置方法：XCode 工程设置三步走

无论哪种引入方式，XCode 侧的配置都是关键，照着下面三步做基本不会翻车。

步骤1：必须包含的文件清单

工程中必须包含 TYZRNEditor 相关的全部原生文件，包括：

TYZRNEditor.pch（预编译头文件）
TYZRNEditorView.h/.m、TYZRNEditorViewManager.h/.m
TYZRNEditorViewController.h/.m
TYZRNMKEditor.h/.m、TYZRNMKEditorManager.h/.m
TYZRNMKPreView.h/.m
AppDelegate.h/.m、main.m、Info.plist、LaunchScreen.xib

以及OtherLib下的全部第三方依赖库（AFNetworking、CocoaLumberjack、WordPress-Editor-iOS 等）。一个都不能漏，漏掉任何一个头文件都会导致编译报错。

步骤2：AppDelegate 加入日志配置

第三方库强制要求初始化 CocoaLumberjack 日志系统，否则运行时可能静默失败。在AppDelegate.m的didFinishLaunchingWithOptions中加入以下配置：

[DDLog addLogger:[DDASLLogger sharedInstance]]; [DDLog addLogger:[DDTTYLogger sharedInstance]]; DDFileLogger *fileLogger = [[DDFileLogger alloc] init]; fileLogger.rollingFrequency = 60 * 60 * 24; // 24小时滚动 fileLogger.logFileManager.maximumNumberOfLogFiles = 7; [DDLog addLogger:fileLogger];

步骤3：PCH 中包含必要头文件

在TYZRNEditor.pch预编译头文件中，把工程编译所要用到的必须头文件全部引入，这样可以显著加快编译速度，同时避免每个文件重复 import。

富文本编辑器怎么用

在 RN 侧引用组件后，通过contentStr、titleStr传入初始内容，backAction监听返回事件：

var TYZRNEditorView = require('./TYZRNEditorView'); render: function() { return ( <TYZRNEditorView style={styles.contentStyle} ref='EditorView' contentStr='这是一条初始化的测试内容' titleStr='这是一个标题' backAction={this._backAction} /> ); }

内容与标题也可以通过组件的getContentString()、getTitleString()方法从 state 中实时获取，方便保存草稿。

Markdown 编辑器怎么用

Markdown 编辑器的用法同样简洁，defaultMarkdownText传入初始文本，backEvent监听返回：

var TYZRNMKEditor = require('./TYZRNMKEditor'); render: function() { return ( <TYZRNMKEditor style={styles.contentStyle} ref='EditorView' defaultMarkdownText='##这是一条初始化的测试内容' backEvent={this._backEvent} /> ); }

支持语法高亮与一键预览切换，编辑体验相当完整。