# @docren/react-native-markdown 中文文档

规范地址：https://npmcn.com/package/%40docren/react-native-markdown/

版本：0\.8\.6
npm 元数据更新时间：2026-11-03T21:50:37.335Z
中文译文更新时间：2026-11-12T14:01:08.155Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40docren/react-native-markdown
原文对照：https://npmcn.com/package/%40docren/react-native-markdown/?lang=original
项目主页：https://github.com/amilmohd155/react-native-markdown#readme
源码仓库：https://github.com/amilmohd155/react-native-markdown

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：90.9 kB，75 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- peer 依赖：react \*，react-native \*
- 首次发布：2025-10-14T12:22:45.379Z
- 最新版本发布：2026-11-03T21:50:37.001Z
- 近 30 天下载量：4995（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：4（近 12 个月 3 个）

## 中文简介

React 原生的马克下调渲染器

## 安装

```sh
npm install @docren/react-native-markdown
```

也可以使用：`pnpm add @docren/react-native-markdown`、`yarn add @docren/react-native-markdown`、`bun add @docren/react-native-markdown`

## README

# 重现原生马克倒置渲染器

![NPM License](https://img.shields.io/npm/l/%40docren%2Freact-native-markdown) ![NPM Version](https://img.shields.io/npm/v/%40docren%2Freact-native-markdown) ![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000) ![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)

由MDAST提供动力,用于React Industrial的灵活和能动的Markdown渲染器. 支持自定义的造型、嵌入元素和可扩展性,为完全控制输出制定规则.

[https://github.com/user-attachments/assets/7e07a865-bccd-4961-b696-0b17935bbcc9 互联网档案馆的存檔,存档日期2013-12-22](https://github.com/user-attachments/assets/7e07a865-bccd-4961-b696-0b17935bbcc9)

## 特征

-   – CommonMark-Compliant – 解析并让 Markdown 以 CommonMark spec 为基础
-   QQ GFM 支持 – 通过可插件扩展以 GitHub Flavored Markdown 特性扩展 Markdown .
-   – React Industrial First – 专为在React Institute中渲染Markdown而设计
-   — — 基于 AST 的渲染 — — 使用自定义的精致控制让规则由 MDAST 节点驱动
-   QQ 完全自定义 – 自定义每个 Markdown 元素如何以灵活方式制作规则
-   QQ 轻量级 & 树形可移动 – 没有捆绑语法亮点的最小脚印
-   QQ TypeScript First — 为更安全和更可预测的代码打字很强

**_标记_** – 有自定义组件的Render Markdown, AST 访问,以及对渲染行为的全面控制.

## 鸣谢

此软件包的灵感来自 [反应- 内置- 标记- 显示](https://github.com/iamacup/react-native-markdown-display) ——多亏了原作者为Markdown在React Introduct中渲染打下基础.

我们用一个完全的型号安全架构构建了这个基础, 用更轻而更现代的mdast-util-broad-markdown parser来交换.

## 安装

国家预防机制

```sh
npm install @docren/react-native-markdown
```

雅伦

```sh
yarn add @docren/react-native-markdown
```

菲律宾

```sh
pnpm add @docren/react-native-markdown
```

## 基准使用

```jsx
import { View, StyleSheet, ScrollView } from 'react-native';

import { Markdown } from '@docren/react-native-markdown';

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Markdown
          markdown={`#Hello world`}
          }
        />
      </ScrollView>
    </View>
  );
}

export default App;
```

更详细用途

### 提案和方法

这个 `<Markdown>` 组件采用下列道具.

| Prop | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| 马克多 | 字符串 QQ Uint8 箭头 | 不详 | `required` Markdown的内容要渲染。 接受纯字符串或 .md 文件内容为 Uint8Array . |
| 样式 | 样式映射 QQ 无效 | [来源](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/styles.ts) | 适用于Markdown元素的样式 。 通过由 Markdown 元素类型键入的样式图 . |
| 合并样式 | 布尔 | 真实 | 是否将默认样式与用户提供的样式图合并 。 若为 `false`,只使用您的风格. |
| 使规则 | 渲染规则 | [来源](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/renderRules.tsx) | 自定义如何使用渲染函数对象渲染特定的Markdown元素 。 默认合并 . |
| 列表 Bullet 样式 | 盘子 盘子 | "盘" | 定义未排序列表的默认项目符号样式( 或 – ) . |
| 自定义组件 | 反演 QQ 无效 | 不详 | 覆盖带有自定义反应元素的默认列表项目。 适用于所有未排列列表项目. |
| 链接新闻 | (url:字符串) 虚空 | 不详 | 按下链接时引用回调 。 提供时, 它取代默认值 `Linking.openURL` 行为. |
| 扩展 | 扩展\[ \] | \[ | 通过提供自定义的 MDAST 扩展或修改 Markdown 解析 。 用于GFM或自定义语法. [要知道更多情况](https://github.com/syntax-tree/mdast-util-from-markdown?tab=readme-ov-file#list-of-extensions) |
| 调试 | 布尔 | 虚假 | 为开发目的在解析和渲染过程中启用调试日志 . |

## 语法支持

-   [x] 块引用
-   [x] 换行
-   [x] 代码
-   [x] 重点
-   [x] 定义
-   [x] 标题
    -   [x] 标题1
    -   [x] 标题3
    -   [x] 标题4
    -   [x] 标题2
    -   [x] 标题5
    -   [x] 标题6
-   [x] 图像
-   [x] 图像参考
-   [x] 内置代码
-   [x] 链接
-   [x] 链接参考
-   [x] 列表
-   [x] 列表 项目
-   [x] 段 次 页 次
-   [x] 根号
-   [x] 强
-   [x] 文本
-   [x] 主题中断
-   [ ] 击出( 计划)
-   [ ] 表格(计划)
    -   [ ] 表单
    -   [ ] 桌面
-   [ ] html(未计划)
-   [ ] (未计划)

## 规则和样式

### 样式元素

文本样式遵循了相接法,类似于CSS的工作方式. 全局样式可以使用根样式设置,该样式将适用于大多数Markdown元素,同时仍然允许您在需要时在单个元素上覆盖特定的样式.

记住:文本样式并不影响所有的文本节点——特别是列表项目等. 如果您想要对所有文本应用一致的样式(例如颜色或字体),则最好用根样式来定义它.

#### 样式

样式允许您自定义特定 Markdown 元素的外观, 压倒默认的样式行为, [默认样式](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/styles.ts)。 。 。 .

> 默认情况下,您的样式与内置样式合并. 要完全覆盖它们,请参考合并的Style道具.

样式示例

```jsx
export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Markdown
          markdown={mdxString}
          styles={{
            blockquote: {
              backgroundColor: '#cad8ee',
              borderRadius: 12,
            },
          }}
        />
      </ScrollView>
    </View>
  );
}
```

#### 规则

规则允许您定义 Markdown 元素应该如何显示 。 您可以找到默认执行 [这里](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/renderRules.tsx)。 。 。 .

注:在定义规则时,确保为每个组件指定一个独特的密钥. 您可以使用节点属性中提供的自定义值或密钥 .

> i️您不需要定义、链接参考或图像参考的规则,因为这些规则是内部解决的链接和图像。 你还可以用在你的Markdown内容中. 如果您需要定制, 请覆盖链接和图像的渲染规则 .

> 如果你用这个包与博览会.

规则示例

```jsx
import {Image} from 'expo-image'

export default function App() {

  const mdxString = `
          ![Alt text](https://fastly.picsum.photos/id/70/200/200.jpg?hmac=hRU7tEHltyLUTf0bCrAWFXlPRXOBTsvCcvL-dIUG2CE "Image title")
          `

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Markdown
          markdown={mdxString}
          renderRules={{
            image: ({ node }) => (
              <Image
                key={(node as any).key}
                source={{ uri: node.url }}
                alt={node.alt ?? ""}
                style={{ width: "100%", height: 300, borderRadius: 8 }}
              />
            ),
          }}
        />
      </ScrollView>
    </View>
  );
}
```

#### 语法高音

这个软件包不包括内置语法突出,因为它的目的是保持轻量级. 不过,您可以整合外部图书馆,例如 [反应 - 内语法 - 高亮](https://www.npmjs.com/package/react-native-syntax-highlighter) 或者说 [反应-内置-代码-高亮器](https://github.com/gmsgowtham/react-native-code-highlighter) 对于这个功能.

一旦集成,您就可以应用语法突出显示 `renderRule.code` 函数.

在包含的示例应用中可以找到一个执行实例.

语法突出显示规则

```jsx

import CodeHighlighter from 'some-syntax-highlighting-package'

<Markdown
  markdown={mdxString}
  renderRules={{
    code: ({ node }) => (
      <CodeHighlighter
        key={(node as any).key}
        hljsStyle={atomOneDarkReasonable} //highlight.js theme
        language={node.lang || 'plaintext'}
        scrollViewProps={{
          bounces: false,
          contentContainerStyle: styles.codeContentContainer,
        }}
        textStyle={styles.codeTextStyle}
      >
        {node.value}
      </CodeHighlighter>
    ),
  }}
/>
```

#### 处理链接

默认情况下,链接由 `Linking` 从反应-内在。 ie,

```tsx
import { Linking } from 'react-native';

Linking.openURL(url);
```

你可以以两种方式之一推翻这种行为:

使用 LinkPress 回调

```jsx

export default function App() {
    const mdxString = `[Link to Google](https://www.google.com)`

    const onLinkPress = (url: string) => {
        // Handle link press, e.g., open in a web browser or navigate to a screen
        console.log('Link pressed:', url);
    };

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Markdown markdown={mdxString} onLinkPress={onLinkPress} />
      </ScrollView>
    </View>
  );
}
```
提供自定义渲染

要覆盖默认链接行为, 您可以使用自定义渲染规则 。 链接。 若您使用博览会, 建议使用Expo路由器进行内部链接和外部链接.

```tsx
export default function Screen() {
  const markdown = `
[Explore](/explore)
        
[Google](https://google.com)
  `;

  const router = useRouter();

  const handleLinkPress = (url: string) => {
    if (!url.startsWith('/')) {
      // If the URL does not start with '/', treat it as an external link
      // and open it in the default browser.
      return Linking.openURL(url);
    }

    router.push(url as Href);
  };

  const rules: RenderRules = {
    link: ({ node, children }) => {
      return (
        <Text
          key={(node as any).key}
          style={{ color: 'blue', textDecorationLine: 'underline' }}
          onPress={() => handleLinkPress(node.url)}
        >
          {children}
        </Text>
      );
    },
  };

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.content}>
        <Markdown markdown={markdown} renderRules={rules} />
      </ScrollView>
    </View>
  );
}
```

#### 所有规则及其相关的风格

大多数规则和样式都使用同名名称,因此参考 [语法支持](https://npmcn.com/package/%40docren/react-native-markdown/#readme-syntax-support) 的章节。 以下列出任何不同命名的例外情况.

当怀疑时,检查 [默认样式](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/styles.ts) 财务报告和审定财务报表 [默认生成规则](https://npmcn.com/package/%40docren/react-native-markdown/src/libs/renderRules.tsx)

> 定义,链接参考和图像参考没有规定规则或样式,因为如上所述,它们作为链接和图像的内部处理.

| 规则 | 样式 | 说明 |
| --- | --- | --- |
| 标题 | 标题1 标题2 标题3 标题4 标题5 | 对于单一标题渲染规则,有6个风格变化,对应不同的标题级别(h1到h6). |
| 列表 项目 | 列表项目、列表包、列表项目 | 列表项目 - 包装子弹和内容的容器样式。 ListBullet – 列表缓存 – 无序列表( 或 ) 中使用的默认项目符号样式 。 \[不适用于自定义项目元素\] 列表项目 Content — 列表项目内容部分的样式 . |

## 路线图

-   主题样式( 暗/ 淡模式)
-   表格支持

## 相关

-   [反应- 内置- 标记- 显示](https://github.com/iamacup/react-native-markdown-display)

## 捐款

见 [贡献指南](https://npmcn.com/package/%40docren/react-native-markdown/CONTRIBUTING.md) 学习如何为储存库和发展工作流程作出贡献.

## 许可证

这个项目根据麻省理工学院的许可证获得许可.

[麻省理工学院](https://npmcn.com/package/%40docren/react-native-markdown/LICENSE)

## 作者数

-   [阿米尔莫赫德155](https://www.github.com/amilmohd155)

## 由 QQ 建造

-   [从标记开始](https://github.com/syntax-tree/mdast-util-from-markdown)
-   [css- to- react-inative (英语)](https://github.com/styled-components/css-to-react-native)

## 常见问题

### @docren/react-native-markdown 是什么？

React 原生的马克下调渲染器

### 如何安装 @docren/react-native-markdown？

在项目目录运行 npm install @docren/react-native-markdown，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @docren/react-native-markdown 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @docren/react-native-markdown 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @docren/react-native-markdown 可以商用吗？

@docren/react-native-markdown 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @docren/react-native-markdown 的下载量有多少？

根据 npm 官方下载统计，@docren/react-native-markdown 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,995 次，日均约 167 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @docren/react-native-markdown 还在维护吗？

最新版本 0\.8\.6 发布于 2026/11/04（9 天前）；至今共发布 4 个版本，其中过去 12 个月发布了 3 个；首次发布于 2025/10/14。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。