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}/>
相关推荐
美狐美颜sdk5 小时前
跨平台直播美颜SDK集成实录:Android/iOS如何适配贴纸功能
android·人工智能·ios·架构·音视频·美颜sdk·第三方美颜sdk
weixin-a153003083167 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
wen's8 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
恋猫de小郭9 小时前
Meta 宣布加入 Kotlin 基金会,将为 Kotlin 和 Android 生态提供全新支持
android·开发语言·ios·kotlin
泓博10 小时前
Objective-c把字符解析成字典
开发语言·ios·objective-c
Daniel_Coder11 小时前
Xcode 中常用图片格式详解
ios·xcode·swift
瓜子三百克11 小时前
Objective-C 路由表原理详解
开发语言·ios·objective-c
帅次11 小时前
Objective-C面向对象编程:类、对象、方法详解(保姆级教程)
flutter·macos·ios·objective-c·iphone·swift·safari
孤水寒月12 小时前
给自己网站增加一个免费的AI助手,纯HTML
前端·人工智能·html
海的诗篇_12 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html