Skip to content

Latest commit

 

History

History
125 lines (87 loc) · 8.67 KB

react-native-markdown-display.md

File metadata and controls

125 lines (87 loc) · 8.67 KB

模板版本：v0.2.2

react-native-markdown-display

Supported platforms License

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-markdown-display Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

进入到工程目录并输入以下命令：

npm

npm install @react-native-oh-tpl/react-native-markdown-display

yarn

yarn add @react-native-oh-tpl/react-native-markdown-display

下面的代码展示了这个库的基本使用场景：

[!WARNING] 使用时 import 的库名不变。

import React from 'react';
import { SafeAreaView, ScrollView, StatusBar } from 'react-native';

import Markdown from 'react-native-markdown-display';

const copy = `# h1 Heading 8-)

**This is some bold text!**

This is normal text
`;

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={{height: '100%'}}
        >
          <Markdown>
            {copy}
          </Markdown>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

export default App;

Link

目前 HarmonyOS 暂不支持 AutoLink，所以 Link 步骤需要手动配置。

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

约束与限制

兼容性

在以下版本验证通过

  • RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：204.1.0.59;
  • RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18;

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

详情请查看react-native-markdown-display

如下是已经 HarmonyOS 化的属性：

[!TIP] " HarmonyOS 支持"列为 yes 的属性表示支持 HarmonyOS 平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。

Name Description Default Required Platform HarmonyOS Support
children The markdown string to render, or the pre-processed tree N/A Yes All yes
style An object to override the styling for the various rules, see style section below for more info source No All yes
mergeStyle If true, when a style is supplied, the individual items are merged with the default styles instead of overwriting them true No All yes
rules An object of rules that specify how to render each markdown item, see rules section below for more info source No All yes
onLinkPress A handler function to change click behaviour, see handling links section below for more info import { Linking } from 'react-native'; and Linking.openURL(url); No All yes
debugPrintTree Will print the AST tree to the console to help you see what the markdown is being translated to false No All yes
renderer Used to specify a custom renderer, you can not use the rules or styles props with a custom renderer. instanceOf(AstRenderer) No All yes
markdownit A custom markdownit instance with your configuration, default is MarkdownIt({typographer: true}) instanceOf(MarkdownIt) No All yes
maxTopLevelChildren If defined as a number will only render out first n many top level children, then will try to render out topLevelMaxExceededItem null No All yes
topLevelMaxExceededItem Will render when maxTopLevelChildren is hit. Make sure to give it a key! <Text key="dotdotdot">...</Text> No All yes
allowedImageHandlers Any image that does not start with one of these will have the defaultImageHandler value prepended to it (unless defaultImageHandler is null in which case it won't try to render anything) ['data:image/png;base64', 'data:image/gif;base64', 'data:image/jpeg;base64', 'https://', 'http://'] No All yes
defaultImageHandler Will be prepended to an image url if it does not start with something in the allowedImageHandlers array, if this is set to null, it won't try to recover but will just not render anything instead. http:// No All yes

遗留问题

其他

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。