简介
@uiw/react-native-markdown 是一个基于 React Native 的 Markdown 渲染组件库，可用于展示 markdown 格式的文本内容，支持常见的 Markdown 语法，如标题、段落、列表、加粗、链接等。
本文将介绍如何使用 @uiw/react-native-markdown 以及它所支持的 Markdown 语法。
安装
在使用 @uiw/react-native-markdown 之前，需要先安装 React Native 和 npm 包管理器。安装完毕之后，使用以下命令安装 @uiw/react-native-markdown：
npm install @uiw/react-native-markdown
使用
使用 @uiw/react-native-markdown 很简单，只需要导入该组件并传入需要展示的 Markdown 文本即可：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ----------------------------- ----- ------- - -- -- - ----- -- - - -- ---- -- - ------- ---- -- - ---------- - --------- ---- ---- - - --------- ---- ---- - - --------- ---- ---- - ------ ------ ------------------------------- -- ------ -------------------------- --
以上代码中，Markdown 组件的内容使用模板字符串的方式定义，并作为 Markdown 组件的 children 传入即可。
支持的语法
@uiw/react-native-markdown 支持的 Markdown 语法如下：
标题
Markdown 中可以使用 # 标记标题，# 的数量表示标题的层级。@uiw/react-native-markdown 支持 1~6 级标题。
# h1 ## h2 ### h3 #### h4 ##### h5 ###### h6
段落
在 Markdown 中，两个段落之间需要有一个空行进行分隔。
This is a paragraph. This is another paragraph.
列表
Markdown 中可以使用 * 或 - 标记无序列表，使用数字加 . 标记有序列表。
- List item 1 - List item 2 - List item 3 1. Order item 1 2. Order item 2 3. Order item 3
加粗
使用 ** 表示加粗。
**Bold text**
斜体
使用 * 表示斜体。
*Italic text*
行内代码
使用 ` 表示行内代码。
This is a \`inline code\` segment.
代码块
使用 ``` 表示代码块，其中三个反引号后可以写入代码块的语言类型。
\`\`\`javascript
const add = (a, b) => {
return a + b;
};
\`\`\`总结
通过本文，你已经学习了如何使用 @uiw/react-native-markdown 展示 Markdown 格式的文本内容，并了解了该组件库所支持的 Markdown 语法。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f1d9381d61a3540d9b