suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Verwenden Sie lokales CSS und JS, um lokales HTML in React Native Webview zu laden

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粉642436282P粉642436282241 Tage vor393

Antworte allen(1)Ich werde antworten

  • P粉329425839

    P粉3294258392024-03-27 17:28:22

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

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

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

    Antwort
    0
  • StornierenAntwort