React Native中使用Markdown编辑器

最新推荐文章于 2024-06-21 09:32:46 发布

兔子喽

最新推荐文章于 2024-06-21 09:32:46 发布

阅读量611

点赞数

分类专栏： Typescript 学习记录 React 文章标签： javascript react react native markdown typescript

本文链接：https://blog.csdn.net/weixin_43783363/article/details/113839111

版权

本文介绍如何在React Native项目中使用Markdown编辑器。通过React Native WebView组件加载HTML页面，实现Web和React Native的通信，同时展示了封装Vditor编辑器的过程，包括准备HTML文件、创建React Native组件等步骤。

摘要由CSDN通过智能技术生成

最近在研究React Native，准备用它写一个笔记APP，但是并没有搜到很好用的编辑器插件，因此准备使用WebView和已有的Web端编辑器自己封装一个。

因本人没有苹果电脑，因此只尝试安卓版本

完整项目地址：Tuzilow/rn-xnote

React Native WebView

WebView是一个能够在原生APP上加载HTML页面的组件，不过它没有提供浏览器的地址栏、导航栏等功能。在原生APP的开发中经常会用到。

安装

npm install react-native-webview
# or yarn add react-native-webview

基本使用

引入URL

import React, {
    Component } from 'react';
import {
    WebView } from 'react-native';

export default function MyWeb () {
   
  return (
    <WebView
      source={
   {
   uri: 'https://github.com/facebook/react-native'}}
    />
  );
}

引入本地文件

import React, {
    Component } from 'react';
import {
    WebView, Platform } from 'react-native';

export default function MyWeb () {
   
  return (
    <WebView
      source={
   
        Platform.OS === 'ios'
          ? require('../../../assets/vditor.html')
          : {
   uri: 'file:///android_asset/vditor.html'}
      }
    />
  );
}