Verwenden Sie lokales CSS und JS, um lokales HTML in React Native Webview zu laden
P粉642436282
P粉642436282 2024-03-26 20:25:57
0
1
434

Ich möchte lokale HTML-, CSS- und JS-Dateien in mein React Native WebView laden, kann aber kein auf HTML angewendetes CSS laden, siehe meine Ordnerstruktur

Oben ist mein HTML zusammen mit CSS-Bildern und JS-Dateien, ich habe alles wie unten in meiner App-Ordnerstruktur abgelegt

src --> html --> Fügen Sie alle oben genannten Dateien in das Bild unten ein

Jetzt verwende ich diesen HTML-Code im tatsächlichen Bildschirm, wie unten gezeigt

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

Wenn ich den obigen Code ausführe, wird der HTML-Code geladen, aber das CSS wird nicht mit Farben, Stilen usw. angewendet.

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

Im obigen Code wird css/style.css nicht auf meine Webansicht angewendet. Haben Sie also eine Idee, wie ich das beheben kann?

P粉642436282
P粉642436282

Antworte allen(1)
P粉329425839

您必须将 html 和 css 文件放在 android 文件夹中的 android_asset 文件夹中,对于 ios 文件夹,将其放在 ios 文件夹中的 resources 中。

if(isAndroid){
  return (
      
  )
}else{
  return(
    
  );
}

更多参考来自: WebView Html 加载自本地

Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage