React Native DraftJS Render 项目教程

React Native DraftJS Render 项目教程

react-native-draftjs-renderReact Native render for draft.js model项目地址:https://gitcode.com/gh_mirrors/re/react-native-draftjs-render

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

react-native-draftjs-render/
├── src/
│   ├── components/
│   │   ├── AtomicBlock.js
│   │   ├── Block.js
│   │   ├── Entity.js
│   │   ├── Inline.js
│   │   └── index.js
│   ├── constants/
│   │   └── index.js
│   ├── utils/
│   │   ├── convertFromHTML.js
│   │   ├── convertToHTML.js
│   │   └── index.js
│   └── index.js
├── .babelrc
├── .eslintrc
├── .gitignore
├── .npmignore
├── .prettierrc
├── LICENSE
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

• src/：包含项目的所有源代码。
  • components/：包含渲染 DraftJS 内容的 React 组件。
    • AtomicBlock.js：处理原子块的组件。
    • Block.js：处理块级元素的组件。
    • Entity.js：处理实体的组件。
    • Inline.js：处理行内元素的组件。
    • index.js：导出所有组件。
  • constants/：包含常量定义。
  • utils/：包含工具函数。
    • convertFromHTML.js：将 HTML 转换为 DraftJS 内容。
    • convertToHTML.js：将 DraftJS 内容转换为 HTML。
    • index.js：导出所有工具函数。
  • index.js：项目的入口文件。
• .babelrc：Babel 配置文件。
• .eslintrc：ESLint 配置文件。
• .gitignore：Git 忽略文件配置。
• .npmignore：NPM 忽略文件配置。
• .prettierrc：Prettier 代码格式化配置。
• LICENSE：项目许可证。
• package.json：项目依赖和脚本配置。
• README.md：项目说明文档。
• yarn.lock：Yarn 依赖锁定文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，它是整个项目的入口点。该文件导出了主要的组件和工具函数，供其他模块使用。

// src/index.js
import DraftJSRender from './components';
import { convertFromHTML, convertToHTML } from './utils';

export { DraftJSRender, convertFromHTML, convertToHTML };

启动文件介绍

• DraftJSRender：主渲染组件，用于渲染 DraftJS 内容。
• convertFromHTML：工具函数，用于将 HTML 转换为 DraftJS 内容。
• convertToHTML：工具函数，用于将 DraftJS 内容转换为 HTML。

3. 项目的配置文件介绍

.babelrc

{
  "presets": ["module:metro-react-native-babel-preset"]
}

.eslintrc

{
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "plugins": ["react"],
  "rules": {
    "react/prop-types": "off"
  }
}

.prettierrc

{
  "singleQuote": true,
  "trailingComma": "all"
}

package.json

{
  "name": "react-native-draftjs-render",
  "version": "1.0.0",
  "description": "A React Native component to render DraftJS editor content",
  "main": "src/index.js",
  "scripts": {
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.64.

react-native-draftjs-renderReact Native render for draft.js model项目地址:https://gitcode.com/gh_mirrors/re/react-native-draftjs-render