在 React Native Webview 中使用本地 css、js 加載本地 HTML

Question

我想在我的本機 webview 中加載本地 html、css、js 文件，但我無法加載應用於 html 的 css，請參考我的文件夾結構

上面是我的 html 以及 css 圖像和 js 文件，我將它們全部放在我的應用程序文件夾結構中，如下所示

src --> html --> demo --> 將上面的所有文件粘貼到下面的圖片中

現在我在我的實際屏幕中使用了這個 html，如下所示

let demoHtmlData = require('../../../html/demo/demo.html')
<WebView
  style={{flex: 1}}
  source={demoHtmlData}
/>

當我運行上面的代碼時，html 已加載但 css 未應用顏色、樣式等。

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<title>VIVJOA®</title>
<meta name="apple-mobile-web-app-status-bar-style" content="#7D5895">
<meta name="theme-color" content="#7D5895" />
<link href="css/style.css" rel="stylesheet">
</head>

在上面的代碼中，css/style.css 沒有應用我的 webview，所以知道如何解決這個問題嗎？

Answer 1

你必須將你的 html 和 css 文件放在文件夾中，對於 android 放置在 android_asset 內的 android 文件夾內，對於 ios 放置在 ios 文件夾內的資源內。

if(isAndroid){
  return (
      <WebView
        style={{flex: 1}}
        originWhitelist={['*']}
        source={{uri:'file:///android_asset/index.html'}}
        style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
  )
}else{
  return(
    <WebView
      style={{flex: 1}}
      originWhitelist={['*']}
      source={'./resources/index.html'}
      style={{ marginTop: 20 }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
    />
  );
}

更多參考來自： WebView Html load from local

Answer 2

查看此官方指南： https ://github.com/react-native-webview/react-native-webview/blob/master/docs/Guide.md#loading-local-html-files

在本次討論中，您可以找到解決問題的可能方法：

https://github.com/react-native-webview/react-native-webview/issues/428

在 React Native Webview 中使用本地 css、js 加載本地 HTML

問題描述

2 個解決方案

解決方案1
0 2022-12-16 10:46:32

解決方案2
0 2022-12-16 17:21:10

在 React Native Webview 中使用本地 css、js 加載本地 HTML

問題描述

2 個解決方案

解決方案1 0 2022-12-16 10:46:32

解決方案2 0 2022-12-16 17:21:10

解決方案1
0 2022-12-16 10:46:32

解決方案2
0 2022-12-16 17:21:10