★ FEATURED ARTICLE 【免费下载链接】enriched-markdownMultiplatform Markdown-Based Rich Text Solution项目地址https://gitcode.com/gh_mirrors/re/enriched-markdown点击查看免费下载Enriched Markdown是一款跨平台的 Markdown 富文本解决方案它把 Markdown 渲染为原生文本不依赖 WebView既能高性能地显示Markdown 富文本也能提供一个输入输出 Markdown的富文本编辑器支持 React NativeiOS、Android、macOS、Web以及独立的 iOSSwift和 AndroidKotlinSDK。无论你是第一次接触富文本开发还是想替换掉 WebView 方案这篇指南都能带你从零搭好环境跑通你的第一个 Markdown 屏幕 它有哪些核心组件Enriched Markdown 围绕两个组件展开理解它们就理解了整个库EnrichedMarkdownText只读展示组件。给它一个 Markdown 字符串它就渲染成完全原生的富文本——标题、列表、代码块、表格、LaTeX 公式、语法高亮一应俱全。EnrichedMarkdownTextInput富文本编辑器。用户看到的是格式化后的文字而它产出的始终是纯 Markdown 文本。二者的关系可以用一句话概括Markdown 是共享的事实来源——编辑器产出 Markdown展示组件消费 Markdown内容在两端之间流转无需任何格式转换。更多原理见 docs/docs/introduction/core-concepts.md。平台要求与兼容性清单安装前请先对照以下平台最低版本要求全部满足才能顺利集成平台最低要求React Native0.83 或更新版本需启用 New Architecture / Fabric默认已开启AndroidminSdk 24Android 7.0iOSReact Native 的最低部署目标contextMenuItems等部分功能需 iOS 16macOS14.0通过 react-native-macosWeb任意支持 WebAssembly 的浏览器MathML 公式渲染需 Chrome 109、Firefox 或 Safari 其他注意事项包本身没有运行时依赖唯一的可选 peer 依赖是katexWeb 端排版 LaTeX 用不用 Web 数学功能可以忽略缺失警告。完整版本对照表见 docs/docs/misc/compatibility.mdx。一键安装步骤npm / yarn / pnpm在你的 React Native 项目根目录执行以下任一命令npm install react-native-enriched-markdownyarn add react-native-enriched-markdownpnpm add react-native-enriched-markdown由于库包含原生代码安装后需要重新构建 App。iOS 端先安装 podscd ios bundle exec pod install两个容易踩的坑原生资源下载安装时会运行postinstall脚本下载代码高亮 grammar 和 iOS 端 LaTeX 框架约 200 MB。该脚本只警告、不报错网络受限或被跳过时会得到一个静默缺功能的构建。可用npm rebuild react-native-enriched-markdown手动补跑且建议在pod install或 Android 构建之前执行。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-markdownReact 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 MarkdownGFM额外提供表格、任务列表、删除线。传入flavorgithub即可启用 GFM。搭建一个最简 Markdown 编辑器EnrichedMarkdownTextInput是写作端。它是一个非受控输入组件不在 React state 中持有值而是直接操作原生文本视图配合ref以命令式方式控制格式。最小编辑器的两个关键模式通过 ref 调用方法应用格式例如ref.current?.toggleBold()对选中文字切换加粗无选中时则为接下来输入的内容预加格式。通过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渲染就是官方推荐的编辑 → 序列化 → 存储 → 渲染标准工作流祝你搭建顺利 ✨赞分享【免费下载链接】enriched-markdownMultiplatform Markdown-Based Rich Text Solution项目地址https://gitcode.com/gh_mirrors/re/enriched-markdown点击查看免费下载相关推荐Enriched Markdown快速上手5分钟在React Native中渲染第一个Markdown视图Enriched Markdown快速上手5分钟在React Native中渲染第一个Markdown视图 想给 React Native 应用加上漂亮的富文VNote终极安装配置指南快速上手跨平台Markdown笔记工具VNote终极安装配置指南快速上手跨平台Markdown笔记工具 想要寻找一款功能强大、完全免费的跨平台Markdown笔记软件吗VNote正是您需要的解决桌面应用知识管理5分钟快速上手TinaCMS从零构建你的第一个Markdown网站5分钟快速上手TinaCMS从零构建你的第一个Markdown网站 想要快速搭建一个支持Markdown和可视化编辑的现代网站吗TinaCMS是一个完全开源CMS前端后端GraphQL创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
阅读完成 · 觉得有帮助？
