@expensify/react-native-live-markdown

特征

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

安装

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

yarn add @expensify/react-native-live-markdown react-native-worklets expensify-common [email protected]
npm install @expensify/react-native-live-markdown react-native-worklets expensify-common [email protected] --save
npx expo install @expensify/react-native-live-markdown react-native-worklets expensify-common [email protected]

重现原生活口 Markdown 需要 反应 - 本地工作 0.7.0或较新,以及 普通费用 2.0.207 或更新 html实体 2.5.3 精确使用默认内置ExpensiMark parser.

[大 请跟随 react-native-worklets 开始 避免问题的指南.

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

cd ios && bundler install && bundler exec pod install

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

[注] 库不支持 Expo Go, 您需要设置 Expo Dev 客户端( 请参见 这里) (中文(简体) ).

使用量

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个字符,当输入超过所配置的限制时返回不格式化范围. 要使用不同的限制, 请将解析器包入工作表函数 :

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

  return parseExpensiMark(input, 5000);
}

样式

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

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

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 道具 :

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

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

解析逻辑

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

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

目前,仅支持以下类型:

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

解析器需要标记为 工作间 因为它作为用户类型在 UI 线索上执行 .

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

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 仅支持 过期马克 风味出盒。 您可以通过自定义的解析器函数自定义行为 parser 道具,详见 解析逻辑 节.

API 参考

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

兼容性

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

反应原生相容性

react-native-worklets 兼容性

许可证

麻省理工学院