# @expensify/react-native-live-markdown 中文文档

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

版本：0\.1\.372
npm 元数据更新时间：2026-11-11T06:22:31.582Z
中文译文更新时间：2026-11-14T04:11:23.840Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：800 kB，252 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react \*，react-native \*，expensify-common \>=2\.0\.207，react-native-worklets \>=0\.7\.0
- 首次发布：2024-02-07T21:15:45.335Z
- 最新版本发布：2026-11-11T06:22:31.180Z
- 近 30 天下载量：118099（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：358（近 12 个月 57 个）

## 中文简介

用Markdown格式替换 React Intext 组件.

## 安装

```sh
npm install @expensify/react-native-live-markdown
```

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

## README

![@expensify/react-native-live-markdown](https://npmcn.com/package/%40expensify/react-native-live-markdown/assets/hero-animation.gif)

## 特征

-   空投替换 `<TextInput>` 组件
-   QQ 在每个按键上同步直播格式
-   完全本土体验(选取、拼写检查、自动完成)
-   QQ 自定义逻辑
-   QQ 自定义样式
-   • 通用支持(Android、iOS、web)
-   QQ 只支持新架构

## 安装

首先,用您选择的软件包管理器从 npm 安装库 :

```sh
yarn add @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3
npm install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3 --save
npx expo install @expensify/react-native-live-markdown react-native-worklets expensify-common html-entities@2.5.3
```

重现原生活口 Markdown 需要 [反应 - 本地工作](https://github.com/software-mansion/react-native-reanimated/tree/main/packages/react-native-worklets) 0.7.0或较新,以及 [普通费用](https://github.com/Expensify/expensify-common) 2.0.207 或更新 [html实体](https://github.com/mdevils/html-entities) 2.5.3 精确使用默认内置ExpensiMark parser.

> \[大 请跟随 `react-native-worklets` [开始](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/getting-started/#react-native-community-cli) 避免问题的指南.

然后,用 CocoaPods 安装 iOS 依赖性:

```sh
cd ios && bundler install && bundler exec pod install
```

图书馆包含本地代码, 您需要重建本地应用程序 .

> \[注\] 库不支持 Expo Go, 您需要设置 Expo Dev 客户端( 请参见 [这里](https://docs.expo.dev/workflow/prebuild/)) (中文(简体) ).

## 使用量

```tsx
import {MarkdownTextInput, parseExpensiMark} from '@expensify/react-native-live-markdown';
import React from 'react';

export default function App() {
  const [text, setText] = React.useState('Hello, *world*!');

  return (
    <MarkdownTextInput
      value={text}
      onChangeText={setText}
      parser={parseExpensiMark}
    />
  );
}
```

内置 `parseExpensiMark` parser 接受可选的最大输入长度。 它默认为4,000个字符,当输入超过所配置的限制时返回不格式化范围. 要使用不同的限制, 请将解析器包入工作表函数 :

```ts
function parser(input: string) {
  'worklet';

  return parseExpensiMark(input, 5000);
}
```

## 样式

`MarkdownTextInput` 可用 `style` 像普通一样的道具 `TextInput` 组件.

还可以自定义格式化内容的样式 `MarkdownTextInput` 组件。 样式对象支持来自 React Industrial 的所有颜色表示,包括 `PlatformColor` 财务报告和审定财务报表 `DynamicColorIOS` 根据 [颜色参考](https://reactnative.dev/docs/colors)。目前,有限的一套样式是可定制的,但今后可能会有所改变.

```tsx
import type {MarkdownStyle} from '@expensify/react-native-live-markdown';

const FONT_FAMILY_MONOSPACE = Platform.select({
  ios: 'Courier',
  default: 'monospace',
});

const FONT_FAMILY_EMOJI = Platform.select({
  ios: 'System',
  android: 'Noto Color Emoji',
  default: 'System, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji',
});

const markdownStyle: MarkdownStyle = {
  syntax: {
    color: 'gray',
  },
  link: {
    color: 'blue',
  },
  h1: {
    fontSize: 25,
  },
  emoji: {
    fontSize: 20,
    fontFamily: FONT_FAMILY_EMOJI,
  },
  blockquote: {
    borderColor: 'gray',
    borderWidth: 6,
    marginLeft: 6,
    paddingLeft: 6,
  },
  code: {
    fontFamily: FONT_FAMILY_MONOSPACE,
    fontSize: 20,
    color: 'black',
    backgroundColor: 'lightgray',
  },
  pre: {
    fontFamily: FONT_FAMILY_MONOSPACE,
    fontSize: 20,
    color: 'black',
    backgroundColor: 'lightgray',
  },
  mentionHere: {
    color: 'green',
    backgroundColor: 'lime',
  },
  mentionUser: {
    color: 'blue',
    backgroundColor: 'cyan',
  },
};
```

样式对象可以传递到多个 `MarkdownTextInput` 使用 `markdownStyle` 道具 :

```tsx
<MarkdownTextInput
  value={text}
  onChangeText={setText}
  style={styles.input}
  markdownStyle={markdownStyle}
/>
```

> \[TIP\] 我们建议将样式对象存储在组件正文外,或者将样式对象与 `React.useMemo`。 。 。 .

## 解析逻辑

`MarkdownTextInput` 行为可以通过 `parser` 属性。 解析器是一个接受平白文字字符串并返回数组的函数 `MarkdownRange` 对象 :

```ts
interface MarkdownRange {
  type: MarkdownType;
  start: number;
  length: number;
  depth?: number;
}
```

目前,仅支持以下类型:

```ts
type MarkdownType = 'bold' | 'italic' | 'strikethrough' | 'emoji' | 'mention-here' | 'mention-user' | 'mention-report' | 'link' | 'code' | 'pre' | 'blockquote' | 'h1' | 'syntax';
```

解析器需要标记为 [工作间](https://docs.swmansion.com/react-native-worklets/docs/fundamentals/glossary#worklet) 因为它作为用户类型在 UI 线索上执行 .

以下是一个将位于两个星号之间的所有子字符串描述为粗体文字的样本函数:

```ts
function parser(input: string) {
  'worklet';

  const ranges = [];
  const regexp = /\*(.*?)\*/g;
  let match;
  while ((match = regexp.exec(input)) !== null) {
    ranges.push({start: match.index, length: 1, type: 'syntax'});
    ranges.push({start: match.index + 1, length: match[1]!.length, type: 'bold'});
    ranges.push({start: match.index + 1 + match[1]!.length, length: 1, type: 'syntax'});
  }
  return ranges;
}
```

> \[TIP\] 我们建议将解析器函数存储在组件正体外,或将解析器函数与 `React.useMemo`。 。 。 .

## 标记下风味支持

目前, `react-native-live-markdown` 仅支持 [过期马克](https://github.com/Expensify/expensify-common/blob/main/lib/ExpensiMark.ts) 风味出盒。 您可以通过自定义的解析器函数自定义行为 `parser` 道具,详见 [解析逻辑](https://npmcn.com/package/%40expensify/react-native-live-markdown/#readme-parsing-logic) 节.

## API 参考

`MarkdownTextInput` 继承 React Industrial 的所有道具 `TextInput` 以及引入以下属性:

| Prop | 类型 | 默认 | 说明 |
| :-: | :-: | :-: | :-: |
| `parser` | `(value: string) => MarkdownRange[]` | `undefined` | 用于分析当前值并返回一系列范围的函数. |
| `markdownStyle` | `MarkdownStyle` | `undefined` | 在 Markdown 文本中添加自定义样式。 提供的值被合并为默认样式对象 。 见 [样式](https://github.com/expensify/react-native-live-markdown/blob/main/README.md#styling) 更多信息. |

## 兼容性

`react-native-live-markdown` 仅支持在启用新架构后最新的 React 本地小版本 .

### 反应原生相容性

|  | 页:1 | 0.74 (简体中文) | 0.75 (简体中文) | 0.76 (简体中文) | 0.77 (简体中文) | 0.78 (简体中文) | 0.79 (中文(简体) ) | 0.80 (中文(简体) ) | 0.81 (中文(简体) ) | 0.82 (简体中文) | 0.83 (中文(简体) ) | 0.84 (中文(简体) ) | 0.85 (中文(简体) ) | 0.86 (中文(简体) ) | 0.87 (中文(简体) ) | 0.88 (中文(简体) ) |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| 0.1362+ (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 0.1331 — 0.1361 (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
| 0.1321 — 0.1.330 (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ |
| 0.1304 - 0.1.320 (韩语) | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.12997–0.1303 (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1.260 — 0.1296 (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1.256–0.1259 (中文(简体) ) | ❌ | ❌ | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1248 — 0.1.255 (中文(简体) ) | ❌ | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1235–0.1.247 (中文(简体) ) | ❌ | ❌ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1.141–0.1234 (中文(简体) ) | ❌ | ❌ | ✅ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1129–0.1.140 (中文(简体) ) | ❌ | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1.122 - 0.1128 (中文(简体) ) | ❌ | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |
| 0.1.15–0.1.121 (中文(简体) ) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |

### `react-native-worklets` 兼容性

|  | 6.6.x (中文(简体) ) | 0.7.x (韩语) | 0.8.x (中文(简体) ) | 0.9.x (韩语) | 0.10.2–0.11.x (中文(简体) ) | 0.12.x (英语) | 0.13.x (中文(简体) ) |
| :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| 0.1343+ (中文(简体) ) | ❌ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| 0.1333–0.1342 (中文(简体) ) | ❌ | ✅ | ✅ | ✅ | ✅ | ❌ | ❌ |
| 0.1321–0.1332 (中文(简体) ) | ❌ | ✅ | ✅ | ✅ | ❌ | ❌ | ❌ |
| 0.1308–0.1320 (中文(简体) ) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | ❌ |

## 许可证

麻省理工学院

* * *

![Brought to you by Software Mansion + Expensify](https://npmcn.com/package/%40expensify/react-native-live-markdown/assets/signature-light.png)

## 常见问题

### @expensify/react-native-live-markdown 是什么？

用Markdown格式替换 React Intext 组件\.

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

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

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

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

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

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

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

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

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

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

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

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