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

在react native中使用 "react-native-webview": "^13.13.5",加载HTML文件

Android:

将HTML文件放置到android/src/main/assets目录,访问

bash 复制代码
{uri: 'file:///android_asset/markmap/index.html'}

ios:

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

bash 复制代码
require('../../assets/markmap.html')

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

bash 复制代码
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: './', // 设置为相对路径

})

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

完整的代码:

bash 复制代码
           <WebView
                ref={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}/>
相关推荐
谈吐大方的鹏sir1 小时前
SwiftUI-Text组件学习
ios
前端Hardy2 小时前
HTML&CSS:惊艳!科技感爆棚的登录页面代码解析
前端·javascript·html
Dxy12393102162 小时前
Python Requests-HTML库详解:从入门到实战
开发语言·python·html
不自律的笨鸟3 小时前
iOS 26,双版本更新来了
ios·iphone
归辞...8 小时前
「iOS」————消息传递和消息转发
ios
Darling02zjh8 小时前
HTML5
前端·html·html5
他们都不看好你,偏偏你最不争气19 小时前
iOS —— 天气预报仿写总结
ios
CodeCraft Studio1 天前
借助Aspose.HTML控件,在 Python 中将 HTML 转换为 Markdown
开发语言·python·html·markdown·aspose·html转markdown·asposel.html
今禾1 天前
前端开发中的Mock技术:深入理解vite-plugin-mock
前端·react.js·vite
你这个年龄怎么睡得着的1 天前
Babel AST 魔法:Vite 插件如何让你的 try...catch 不再“裸奔”?
前端·javascript·vite