快速上手 Enriched Markdown：安装配置、平台要求与你的第一个 Markdown 屏幕

Enriched Markdown是一款跨平台的 Markdown 富文本解决方案，它把 Markdown 渲染为原生文本（不依赖 WebView），既能高性能地"显示"Markdown 富文本，也能提供一个"输入输出 Markdown"的富文本编辑器，支持 React Native（iOS、Android、macOS、Web）以及独立的 iOS（Swift）和 Android（Kotlin）SDK。无论你是第一次接触富文本开发，还是想替换掉 WebView 方案，这篇指南都能带你从零搭好环境，跑通你的第一个 Markdown 屏幕 🚀

它有哪些核心组件？

Enriched Markdown 围绕两个组件展开，理解它们就理解了整个库：

• EnrichedMarkdownText：只读展示组件。给它一个 Markdown 字符串，它就渲染成完全原生的富文本——标题、列表、代码块、表格、LaTeX 公式、语法高亮一应俱全。
• EnrichedMarkdownTextInput：富文本编辑器。用户看到的是格式化后的文字，而它产出的始终是纯 Markdown 文本。

二者的关系可以用一句话概括：Markdown 是共享的"事实来源"——编辑器产出 Markdown，展示组件消费 Markdown，内容在两端之间流转无需任何格式转换。更多原理见 docs/docs/introduction/core-concepts.md。

平台要求与兼容性清单

安装前请先对照以下平台最低版本要求，全部满足才能顺利集成：

💡 其他注意事项：

• 包本身没有运行时依赖，唯一的可选 peer 依赖是katex（Web 端排版 LaTeX 用，不用 Web 数学功能可以忽略缺失警告）。
• 完整版本对照表见 docs/docs/misc/compatibility.mdx。

一键安装步骤（npm / yarn / pnpm）

在你的 React Native 项目根目录执行以下任一命令：

npm install react-native-enriched-markdown

yarn add react-native-enriched-markdown

pnpm add react-native-enriched-markdown

由于库包含原生代码，安装后需要重新构建 App。iOS 端先安装 pods：

cd ios && bundle exec pod install

两个容易踩的坑：

1. 原生资源下载：安装时会运行postinstall脚本，下载代码高亮 grammar 和 iOS 端 LaTeX 框架（约 200 MB）。该脚本只警告、不报错，网络受限或被跳过时会得到一个"静默缺功能"的构建。可用npm rebuild react-native-enriched-markdown手动补跑，且建议在pod install或 Android 构建之前执行。
2. pnpm 用户：pnpm 默认拦截依赖的生命周期脚本，需把该包加入onlyBuiltDependencies，否则postinstall不会执行。

使用 Expo 的项目用npx expo install react-native-enriched-markdown安装（会自动匹配 SDK 版本），并注意库含原生代码、不能运行在 Expo Go，请使用 development build。

想要浏览源码？克隆仓库：git clone https://gitcode.com/gh_mirrors/re/enriched-markdown，React Native 包位于 packages/react-native-enriched-markdown/，安装细节可参考 packages/react-native-enriched-markdown/README.md。

渲染你的第一个 Markdown 屏幕

打开项目，写一个最小示例：

import { EnrichedMarkdownText } from 'react-native-enriched-markdown'; import { Linking } from 'react-native'; <EnrichedMarkdownText markdown={"# Hello\n\nThis is **enriched** [markdown](https://commonmark.org)."} onLinkPress={({ url }) => Linking.openURL(url)} />

就这么多。markdown属性传入字符串，onLinkPress在读者点击链接时触发（这里交给系统浏览器打开）。

每个元素（标题、引用、列表、表格……）都可以通过markdownStyle属性定制样式，完整属性列表见官方文档 docs/docs/react-native/api-reference/style-properties.md。

📌 小提示：库支持两种语法方言——CommonMark（默认）和GitHub Flavored Markdown（GFM，额外提供表格、任务列表、删除线）。传入flavor="github"即可启用 GFM。

搭建一个最简 Markdown 编辑器

EnrichedMarkdownTextInput是"写作端"。它是一个非受控输入组件：不在 React state 中持有值，而是直接操作原生文本视图，配合ref以命令式方式控制格式。最小编辑器的两个关键模式：

1. 通过 ref 调用方法应用格式：例如ref.current?.toggleBold()，对选中文字切换加粗；无选中时则为接下来输入的内容"预加"格式。
2. 通过onChangeState回调读取格式状态：回调里每个样式（bold、italic等）都有一个isActive标记，这正是工具栏按钮能显示"加粗 / 取消加粗"的依据。

选中文字时，编辑器还自带原生格式工具条，也就是说你还没写任何 UI，基础格式化就已经能用了。完整的 ref 方法与事件见 docs-md/INPUT.md。

常见问题速答

• 为什么链接不打开？展示组件不会替你打开链接，onLinkPress的 URL 需要交给Linking.openURL或你自己的路由。
• 数学公式和代码高亮没效果？大概率是安装时postinstall脚本被跳过，原生资源没下载，补跑一次重建脚本即可（详见 docs-md/NATIVE_ASSETS.md）。
• nightly 版本能上生产吗？@nightly每日自动发布、可能包含破坏性变更，只建议用于预览体验，见 docs-md/BREAKING_CHANGES.md。

下一步学什么

• 📖 核心理念与 Markdown 语法速览：docs/docs/introduction/core-concepts.md
• 📖 各平台功能支持总览：docs/docs/introduction/supported-features.md
• 📖 完整安装文档（含 Expo 与 nightly 说明）：docs/docs/react-native/basics/installation.mdx
• 📖 组件 API 参考：docs/docs/react-native/api-reference/
• 🧩 功能源码入口：packages/react-native-enriched-markdown/src/

到这里，你已经完成了 Enriched Markdown 的安装配置，并跑通了展示与编辑两个核心屏幕。把EnrichedMarkdownTextInput产出的 Markdown 存下来，再喂给EnrichedMarkdownText渲染，就是官方推荐的"编辑 → 序列化 → 存储 → 渲染"标准工作流，祝你搭建顺利 ✨