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

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.lqws.cn/news/87427.html

相关文章:

  • 如何轻松地将数据从 iPhone传输到iPhone 16
  • React Native图片预加载:让你的应用图片预览像德芙一样丝滑
  • vue3学习
  • dvwa7——SQL Injection
  • TypeScript中class的两种继承方式extends和implements的对比
  • Hadoop 3.x 伪分布式 8088端口无法访问问题处理
  • 【Java实用工具类】手撸SqlBuilder工具类,优雅拼接动态SQL,MyBatisPlus同款风格!
  • 记一次sql按经纬度计算距离
  • 立志成为一名优秀测试开发工程师(第十一天)—Postman动态参数/变量、文件上传、断言策略、批量执行及CSV/JSON数据驱动测试
  • K8s基础一
  • k8s更新证书
  • 【信创-k8s】海光/兆芯+银河麒麟V10离线部署k8s1.31.8+kubesphere4.1.3
  • 03.搭建K8S集群
  • IPython 使用技巧整理
  • Impromptu VLA:用于驾驶视觉-语言-动作模型的开放权重和开放数据
  • 基于wifi的室内定位算法设计与实现
  • 25年宁德时代新能源科技SHL 测评语言理解数字推理Verify题库
  • 操作系统:生态思政
  • Java基础(二):八种基本数据类型详解
  • [蓝桥杯]路径之谜
  • 从 iPhone 备份照片: 保存iPhone图片的5种方法
  • 【Pandas】pandas DataFrame rename_axis
  • vue-15 (实践练习:使用路由防护实现身份验证和授权)
  • MTK的Download agent是什么下载程序?
  • 【开源工具】Python+PyQt5打造智能桌面单词记忆工具:悬浮窗+热键切换+自定义词库
  • 【开源工具】超全Emoji工具箱开发实战:Python+PyQt5打造跨平台表情管理神器
  • 【C++高并发内存池篇】性能卷王养成记:C++ 定长内存池,让内存分配快到飞起!
  • 第三章 3.MAC Address(CCNA)
  • Redis 缓存粒度如何控制?缓存整个对象还是部分字段?
  • 写读后感的时候,可以适当地引用书中的内容吗?