❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2026年1月18日首页

告别 WebView 卡顿！我开发了一款纯原生的 React Native (Fabric) 富文本编辑器

✇掘金 前端
作者 小冰球
2026年1月18日 10:45

告别 WebView 卡顿！我开发了一款纯原生的 React Native (Fabric) 富文本编辑器

2025 年了，React Native 开发者还在为富文本编辑器头疼吗？这里有一个全新的、纯原生的、基于 Fabric 架构的解决方案。

🔴 痛点：为什么我们需要一个新的富文本编辑器？

作为一名长期深耕 React Native 的开发者，在处理富文本需求时，我发现市面上的解决方案总是存在各种妥协：

  1. WebView 方案的性能瓶颈：大多数编辑器（如基于 Quill 或 Prosemirror 的封装）本质上是在跑一个 Web 页面。加载慢、输入延迟、键盘高度计算不准、光标跳动...这些问题在复杂的交互场景下尤其实明显。
  2. 原生方案的维护困境：曾经有一些原生实现的库，但大多已停止维护，不支持最新的 RN 版本，更别提适配 RN 0.83+ 的新架构（Fabric）了。
  3. 架构过时：随着 React Native 全面拥抱 New Architecture (Fabric)，老旧的 Native Module 在未来将寸步难行。

"为了极致的体验，必须上纯原生，必须支持 Fabric。"

基于这个执念，我开发了 react-native-rich-text-fabric。

✨ 核心优势：回归原生体验

react-native-rich-text-fabric 是一个专为高性能场景设计的富文本显示与输入组件库。

1. 🚀 纯原生实现 (No WebView)

完全抛弃 WebView，利用原生 Text 和 Image 组件进行渲染。这意味着：

  • 0 秒开屏：没有 WebView 的加载时间。
  • 极致流畅：输入体验和原生输入框完全一致，跟手度 100%。
  • 内存更优：原生组件的内存占用远低于完整的浏览器内核。

2. 🏗 拥抱新架构 (Fabric Ready)

专为 React Native 0.83+ 设计，强制要求开启 Fabric。这确保了组件在未来的 RN 版本中依然稳健，同时享受 Fabric 带来的同步渲染和并发特性。

3. 📝 强大的图文混排与编辑

  • RichText (显示)：不仅支持文本，还支持图片插入。
  • RichTextInput (编辑)：支持边写边改，插入图片，修改样式。
  • @提及 (Mention) 支持：这是很多社交 App 的刚需。我们实现了原子化删除——删除 @Asterisk 时，会将其作为一个整体删除，而不是一个字符一个字符删，体验对齐原生 App。

4. 🎨 高度可定制

  • 支持加粗、斜体、下划线、背景色等常用样式。
  • 光标颜色、图片占位图均可自定义。

📸 效果演示

Demo转存失败，建议直接上传图片文件

🛠 快速上手

安装

由于依赖 Fabric，请确保你的项目版本 >= 0.83。

npm install react-native-rich-text-fabric
# 或者
yarn add react-native-rich-text-fabric

使用 RichTextInput

import { useRef } from 'react';
import {
  RichTextInput,
  type RichTextInputRef,
} from 'react-native-rich-text-fabric';

const App = () => {
  const ref = useRef<RichTextInputRef>(null);

  return (
    <RichTextInput
      ref={ref}
      placeholder="请输入内容..."
      onContentChange={(content) => console.log('当前内容:', content)}
      style={{ flex: 1 }}
    />
  );
};

插入样式文本和图片

// 插入带样式的文本
ref.current?.insertText({
  text: 'Hello Fabric!',
  textStyle: { fontWeight: 'bold', color: 'blue' },
});

// 插入图片
ref.current?.insertImage({
  image: 'https://example.com/image.png',
  imageStyle: { width: 100, height: 100 },
});

实现 @Mention 功能

// 插入一个不可分割的 @Mention
ref.current?.insertText({
  text: `@Asterisk `,
  textStyle: { color: '#1890ff' },
  atomicId: 'user_123', // 关键：设置 atomicId 后，该文本段落将被视为一个整体
});

⚙️ 技术细节：我们是如何做到的？

文本与图片的组合

在底层，我们并没有使用复杂的自绘引擎，而是回归本源，利用 React Native 已有的 Text 组件嵌套机制，结合 Image 组件的图文混排能力。这保证了最大的兼容性和稳定性。

关于图片组件

目前组件内部使用了原生的 Image。为了追求更好的加载体验（如缓存、WebP 支持），建议结合 react-native-fast-image 使用。未来计划将高性能图片加载能力内置或提供更灵活的适配接口。

🤝 开源与共建

这个项目依然在快速迭代中。目前 Roadmap 包含：

  • 更多样式的支持
  • 撤销/重做 (Undo/Redo)
  • 更加完善的 Web 端支持 (如果有需求)

如果你也在寻找 RN 平台的高性能富文本方案，欢迎试用并给个 Star ⭐️！

🔗 GitHub 仓库: github.com/AsteriskZuo…

Made with ❤️ by AsteriskZuo

❌
❌