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.pswp.cn/diannao/85738.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/85738.shtml
英文地址,請注明出處:http://en.pswp.cn/diannao/85738.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

數據結構(JAVA版)練習題

&#xff08;題目難易程度與題號順序無關哦&#xff09; 目錄 1、多關鍵字排序 2、集合類的綜合應用問題 3、數組排序 4、球的相關計算問題 5、利用類對象計算日期 6、日期計算問題 7、星期日期的計算 8、計算坐標平面上兩點距離 9、異常處理設計問題 10、Java源文件…

04-redis-分布式鎖-redisson

1 基本概念 百度百科&#xff1a;控制分布式系統之間同步訪問共享資源方式。 在分布式系統中&#xff0c;常常需要協調他們的動作。如果不同的系統或是同一個系統的不同主機之間共享了一個或一組資源&#xff0c;那么訪問這些資源的時候&#xff0c;往往需要互斥來防止…

性能優化 - 案例篇:緩存_Guava#LoadingCache設計

文章目錄 Pre引言1. 緩存基本概念2. Guava 的 LoadingCache2.1 引入依賴與初始化2.2 手動 put 與自動加載&#xff08;CacheLoader&#xff09;2.2.1 示例代碼 2.3 緩存移除與監聽&#xff08;invalidate removalListener&#xff09; 3. 緩存回收策略3.1 基于容量的回收&…

使用jstack排查CPU飆升的問題記錄

最近&#xff0c;看到短視頻傳播了一個使用jstack來協助排查CPU飆升的案例。我也是比較感興趣&#xff0c;參考了視頻博主的流程&#xff0c;自己做了下對應案例的實戰演練&#xff0c;在此&#xff0c;想做一下&#xff0c;針對相關問題模擬與排查演練的實戰過程記錄。 案例中…

Sql Server 中常用語句

1.創建用戶數據庫 --創建數據庫 use master --切換到master數據庫 go-- 終止所有與SaleManagerDB數據庫的連接 alter database SaleManagerDB set single_user with rollback immediate goif exists (select * from sysdatabases where nameSaleManagerDB) drop database Sal…

聯通專線賦能,億林網絡裸金屬服務器:中小企業 IT 架構升級優選方案

在當今數字化飛速發展的時代&#xff0c;中小企業面臨著日益增長的業務需求與復雜多變的市場競爭環境。如何構建高效、穩定且具性價比的 IT 架構&#xff0c;成為眾多企業突破發展瓶頸的關鍵所在。而億林網絡推出的 24 核 32G 裸金屬服務器&#xff0c;搭配聯通專線的千兆共享帶…

LangChain核心之Runnable接口底層實現

導讀&#xff1a;作為LangChain框架的核心抽象層&#xff0c;Runnable接口正在重新定義AI應用開發的標準模式。這一統一接口設計將模型調用、數據處理和API集成等功能封裝為可復用的邏輯單元&#xff0c;通過簡潔的管道符語法實現復雜任務的聲明式編排。 對于面臨AI應用架構選擇…

CSP嚴格模式返回不存在的爬蟲相關文件

文章目錄 說明示例&#xff08;返回404&#xff09;示例&#xff08;創建CSP例外&#xff09; 說明 日期&#xff1a;2025年6月4日。 CSP嚴格模式是default-src none&#xff0c;但有些web應用中&#xff0c;在爬蟲相關文件不存在的情況下&#xff0c;依舊返回了對應文件&…

DeviceNET從站轉EtherNET/IP主站在鹽化工行業的創新應用

在工業自動化飛速發展的今天&#xff0c;鹽化工行業也在積極探索智能化升級的路徑。其中&#xff0c;設備之間的高效通信與協同工作成為了提升生產效率和質量的關鍵。而JH-DVN-EIP疆鴻智能DeviceNET從站轉EtherNET/IP主站的技術應用&#xff0c;為鹽化工行業帶來了全新的解決方…

安裝 Nginx

個人博客地址&#xff1a;安裝 Nginx | 一張假鈔的真實世界 對于 Linux 平臺&#xff0c;Nginx 安裝包 可以從 nginx.org 下載。 Ubuntu: 版本Codename支持平臺12.04precisex86_64, i38614.04trustyx86_64, i386, aarch64/arm6415.10wilyx86_64, i386 在 Debian/Ubuntu 系統…

默認網關 -- 負責轉發數據包到其他網絡的設備(通常是路由器)

? 默認網關概括說明&#xff1a; 默認網關&#xff08;Default Gateway&#xff09;是網絡中一臺負責轉發數據包到其他網絡的設備&#xff08;通常是路由器&#xff09;。當一臺主機要訪問不在本地子網內的設備時&#xff0c;會將數據包發給默認網關&#xff0c;由它繼續轉發…

cv::FileStorage用法

cv::FileStorage 是 OpenCV 中的一個類&#xff0c;用于讀取和寫入結構化數據&#xff08;如 YAML、XML、JSON&#xff09;。它非常適合保存和加載諸如&#xff1a; 相機內參&#xff08;K、D&#xff09; 位姿&#xff08;R、T&#xff09; IMU 數據 配置參數 向量、矩陣、…

WebFuture:啟動服務提示Job webfuture.service/start failed with result ‘dependency‘處理辦法

問題分析&#xff1a; 當出現 Job webfuture.service/start failed with result dependency. 這樣的錯誤提示時&#xff0c;通常意味著 webfuture.service 這個服務在啟動時因為依賴關系的問題而未能成功啟動 解決辦法&#xff1a; 原因分析&#xff1a; webfuture.service 可…

Java 大視界 -- Java 大數據機器學習模型在遙感圖像變化檢測中的應用與改進(235)

??親愛的朋友們,熱烈歡迎來到 青云交的博客!能與諸位在此相逢,我倍感榮幸。在這飛速更迭的時代,我們都渴望一方心靈凈土,而 我的博客 正是這樣溫暖的所在。這里為你呈上趣味與實用兼具的知識,也期待你毫無保留地分享獨特見解,愿我們于此攜手成長,共赴新程!?? 全網…

HarmonyOS運動開發:精準估算室內運動的距離、速度與步幅

##鴻蒙核心技術##運動開發##Sensor Service Kit&#xff08;傳感器服務&#xff09;# 前言 在室內運動場景中&#xff0c;由于缺乏 GPS 信號&#xff0c;傳統的基于衛星定位的運動數據追蹤方法無法使用。因此&#xff0c;如何準確估算室內運動的距離、速度和步幅&#xff0c;…

商品模塊中的多規格設計:實現方式與電商/ERP系統的架構對比

在商品管理系統中&#xff0c;多規格設計&#xff08;Multi-Specification Product Design&#xff09;是一個至關重要但又極具挑戰性的領域。無論是面向消費者的電商系統&#xff0c;還是面向企業管理的ERP系統&#xff0c;對商品規格的處理方式直接影響庫存管理、訂單履約、數…

HTML 等價字符引用:系統化記憶指南

HTML 等價字符引用:系統化記憶指南 在 HTML 中,字符引用(Character Entity References)用于表示保留字符或特殊符號。我將提供一個系統化的方法來記憶這些重要實體,并解釋它們的實際應用。 什么是等價字符引用? HTML 字符引用有兩種形式: 命名實體:&entity_name…

Java 線程池原理詳解

Java 線程池原理詳解 一、引言 在高并發場景下&#xff0c;頻繁地創建與銷毀線程將帶來極大的性能開銷。為了提升資源復用性與程序響應速度&#xff0c;Java 提供了線程池機制&#xff08;java.util.concurrent 包&#xff09;。線程池通過復用線程、控制線程數量、任務排隊管…

Mybatis入門到精通

一&#xff1a;什么是Mybatis 二&#xff1a;Mybatis就是簡化jdbc代碼的 三&#xff1a;Mybatis的操作步驟 1&#xff1a;在數據庫中創建一個表&#xff0c;并添加數據 我們這里就省略了 2&#xff1a;Mybatis通過maven來導入坐標&#xff08;jar包&#xff09; 3&#xff1a…

化學方程式配平免費API接口教程

接口簡介&#xff1a; 根據反應物和生成物配平化學方程式。 請求地址&#xff1a; https://cn.apihz.cn/api/other/hxfcs.php 請求方式&#xff1a; POST或GET。 請求參數&#xff1a; 【名稱】【參數】【必填】【說明】 【用戶ID】【id】【是】【用戶中心的數字ID&#xff…