当前位置: 首页 > web >正文

react native webview加载本地HTML,解决iOS无法加载成功问题

在react native中使用 “react-native-webview”: “^13.13.5”,加载HTML文件
Android:
将HTML文件放置到android/src/main/assets目录,访问

{uri: 'file:///android_asset/markmap/index.html'}

ios:
在IOS中可以直接可以直接放在react native项目下,访问方式如下

require('../../assets/markmap.html')

这里遇到一个问题是编译出来的HTML文件中带有单独的js和CSS的时候在iOS中无法加载成功,解决方法是用vite-plugin-singlefile将前端项目导出为单独文件,我的vite.config.js配置如下:

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import {viteSingleFile} from "vite-plugin-singlefile";// https://vitejs.dev/config/
export default defineConfig({plugins: [react(),viteSingleFile()],base: './', // 设置为相对路径})

如果是其他的打包方式也实现同样的功能就行。

完整的代码:

           <WebViewref={webViewRef}source={Platform.OS==='android'?{uri: 'file:///android_asset/markmap/index.html'}:require('../../assets/markmap.html')}style={styles.webView}originWhitelist={['*']}javaScriptEnabled={true}domStorageEnabled={true}allowFileAccess={true}allowFileAccessFromFileURLs={true}allowUniversalAccessFromFileURLs={true}onMessage={handleMessage}/>
http://www.xdnf.cn/news/10747.html

相关文章:

  • 计算机网络通信技术与协议(八)----关于IS-IS的基础概念
  • HALCON 深度学习训练 3D 图像的几种方式优缺点
  • SpringBoot 系列之集成 RabbitMQ 实现高效流量控制
  • 使用Process Explorer、System Informer(Process Hacker)和Windbg工具排查软件高CPU占用问题
  • 基于51单片机和8X8点阵屏、独立按键的填充消除类小游戏
  • h5的aliplayer-min.js 加密视频会走到debugger
  • 计算A图片所有颜色占B图片红色区域的百分比
  • 第7章 :面向对象
  • 华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建
  • 交叉验证集(Cross-Validation Set)和测试集(Test Set)
  • Delphi SetFileSecurity 设置安全描述符
  • 二叉树day1
  • C++和C#界面开发方式的全面对比
  • 初始化已有项目仓库,推送远程(Git)
  • git clone报错:SSL certificate problem: unable to get local issuer certificate
  • 用户管理页面(解决toggleRowSelection在dialog用不了的隐患,包含el-table的plus版本的组件)
  • Java程序员视角- NIO 到 Epoll:深度解析 IO 多路复用原理及 Select/Poll/Epoll 对
  • 立志成为一名优秀测试开发工程师(第十一天)—Postman动态参数/变量、文件上传、断言策略、批量执行及CSV/JSON数据驱动测试
  • 5.3.1_1二叉树的先中后序遍历
  • 操作系统学习(十一)——磁盘
  • 【agent开发】部署LLM(一)
  • 内容中台的实施基石是什么?
  • 简道云--第一个表单
  • 普中STM32F103ZET6开发攻略(二)
  • 人工智能工程技术专业 和 其他信息技术专业 有哪些关联性?
  • window/linux ollama部署模型
  • docker使用sh脚本创建容器,保持容器正常运行,异常关闭后马上重启
  • 【Unity】云渲染
  • 第1章:走进Golang
  • 《类和对象--继承》