reagieren nativen webview laden von Gerät lokale Datei-system

Ich versuche zu laden .html.js.css Dateien vom lokalen Dateisystem zu Reagieren Nativen WebView-Komponente. Ich war in der Lage, den Pfad zu der index.html - Datei, sondern durch die Angabe dieses als url für die WebView einfach ein Fehler ausgegeben. Wie würde ich das angehen? Bitte um Hilfe!!

InformationsquelleAutor der Frage Wonil Suh | 2015-11-03

  1. 14

    In reagieren nativen es ist nun möglich, erfordern eine HTML-Datei und verwenden Sie es als Quelle für die web-Ansicht, wie hier (der Pfad ist relativ zum reagieren-native Datei, die Sie verwenden in):

    const webapp = require('./webapp/index.html');

    und verwenden Sie es in der WebView wie diese:

    <WebView source={webapp} />

    Leider wird nicht geladen, CSS-und JavaScript-Dateien, auf die verwiesen wird in die HTML. Eine Lösung könnte sein, zu schreiben, alle CSS-und JS-inline (z.B. durch die Verwendung eines build-Prozesses).

    InformationsquelleAutor der Antwort Rias

  2. 4

    Müssen Sie möglicherweise wickeln Sie Ihre eigenen Native-Modul, dies zu tun. Reagieren Native WebView verwendet UIWebViewfür Informationen über das laden einer lokalen Datei, nehmen Sie einen Blick hier: https://gist.github.com/amster/9160860

    Es ist jedoch zu empfehlen, die Sie verwenden WKWebView Sie wickeln kann man sich relativ leicht. Derzeit gibt es ein repo, das ist WIP: https://github.com/qrush/react-native-wkwebview

    Vollbringen laden lokale Ressourcen mit WKWebView finden Sie in dieser Antwort: https://stackoverflow.com/a/28676439/398136

    InformationsquelleAutor der Antwort stan229

  3. 0

    Legen Sie dieses Skript in einer Datei von ReactNative oder Ihren code, empfohlen zur ersten oder oberen index-Datei.
    Und es wird fix problem, getestet auf RN0.39

    import { Platform } from 'react-native';
import { setCustomSourceTransformer } from 'react-native/Libraries/Image/resolveAssetSource';

setCustomSourceTransformer(function (resolver) {

  if (Platform.OS === 'android'
    && !resolver.serverUrl
    && !resolver.bundlePath
    && resolver.asset.type === 'html') {
    resolver.bundlePath = '/android_asset/';
  }

  return resolver.defaultAsset();
});

    InformationsquelleAutor der Antwort dryymoon

Schreibe einen Kommentar