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

依旧00

已于 2025-06-03 13:45:45 修改

阅读量408

点赞数 1

分类专栏： react native 文章标签： react native html ios vite webview

于 2025-06-03 13:44:19 首次发布

本文链接：https://blog.csdn.net/zhong1113/article/details/148399906

版权

react native 专栏收录该内容

6 篇文章

订阅专栏

在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: './', // 设置为相对路径

})

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

完整的代码：

           <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}/>