欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 科技 > 名人名企 > react native webview加载本地HTML,解决iOS无法加载成功问题

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

2025/11/11 23:09:20 来源:https://blog.csdn.net/zhong1113/article/details/148399906  浏览:    关键词: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}/>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词