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