React Native Markdown Renderer 使用教程

React Native Markdown Renderer 使用教程

react-native-markdown-rendererReact Native 100% compatible CommonMark renderer项目地址:https://gitcode.com/gh_mirrors/re/react-native-markdown-renderer

1. 项目的目录结构及介绍

react-native-markdown-renderer/
├── src/
│   ├── lib/
│   │   ├── index.js
│   │   ├── markdown.js
│   │   ├── styles.js
│   │   └── utils.js
│   ├── components/
│   │   ├── BlockQuote.js
│   │   ├── CodeBlock.js
│   │   ├── Heading.js
│   │   ├── Link.js
│   │   ├── List.js
│   │   ├── Markdown.js
│   │   ├── Paragraph.js
│   │   ├── Text.js
│   │   └── ThematicBreak.js
│   └── index.js
├── .babelrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• src/lib/: 包含核心的 Markdown 解析和渲染逻辑。
  • index.js: 入口文件，导出整个库。
  • markdown.js: Markdown 解析逻辑。
  • styles.js: 默认样式定义。
  • utils.js: 工具函数。
• src/components/: 包含各个 Markdown 元素的 React 组件。
  • BlockQuote.js: 引用块组件。
  • CodeBlock.js: 代码块组件。
  • Heading.js: 标题组件。
  • Link.js: 链接组件。
  • List.js: 列表组件。
  • Markdown.js: 主 Markdown 组件。
  • Paragraph.js: 段落组件。
  • Text.js: 文本组件。
  • ThematicBreak.js: 分隔线组件。
• src/index.js: 库的入口文件。
• .babelrc: Babel 配置文件。
• .gitignore: Git 忽略文件配置。
• .npmignore: npm 忽略文件配置。
• .prettierrc: Prettier 代码格式化配置。
• LICENSE: 项目许可证。
• package.json: 项目依赖和脚本配置。
• README.md: 项目说明文档。
• yarn.lock: Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它导出了整个库的主要功能。这个文件主要负责初始化库并导出必要的组件和函数。

// src/index.js
import Markdown from './components/Markdown';
import { getMarkdownIt } from './lib/markdown';
import defaultStyles from './lib/styles';

export { Markdown, getMarkdownIt, defaultStyles };

启动文件介绍

• Markdown: 主 Markdown 组件，用于渲染 Markdown 内容。
• getMarkdownIt: 获取 MarkdownIt 实例的函数，用于自定义 Markdown 解析。
• defaultStyles: 默认的样式定义。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-native-markdown-renderer",
  "version": "3.2.8",
  "description": "Markdown renderer for react-native, with CommonMark spec support + adds some custom rules",
  "main": "src/index.js",
  "scripts": {
    "test": "jest",
    "lint": "eslint src",
    "format": "prettier --write \"src/**/*.js\""
  },
  "keywords": [
    "react-native",
    "markdown",
    "commonmark",
    "markdown-it"
  ],
  "author": "Mient-jan Stelling",
  "license": "MIT",
  "dependencies": {
    "markdown-it": "^8.4.2",
    "prop-types": "^15.6.2"
  },
  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint

react-native-markdown-rendererReact Native 100% compatible CommonMark renderer项目地址:https://gitcode.com/gh_mirrors/re/react-native-markdown-renderer