Zugriff auf lokale Datei in einem WebView in reaktiven nativen

Question

Ich sende einen lokalen Dateipfad zu einem Webview und möchte das Bild in einem Canvas anzeigen.

Ich erhalte den Weg in meine webview aber es kann nicht geladen werden, hier ist die Nachricht erhalte ich:

Nicht lokale Ressource laden erlaubt: file: //// Benutzer/...

Gibt es eine Lösung für den Zugriff auf eine lokale Datei oder eine andere Arbeit?

<WebView 
    style={{flex:1,borderWidth:2}} 
    source={require('./webview/canvas.html')} 
    ref={webview => {this.webview = webview; }} 
    onLoad={this._webViewLoaded.bind(this)} 
    onMessage={this._getMessageFromWebView.bind(this)} 

/>

Und dann Daten mit dem Senden:

this.webview.postMessage(this.state.path); 

Wo this.state.path einen lokalen Pfad ist nach der Verwendung der Kamerakomponente

Answer 1

Ich verwende eine Umgehen Sie dieses Problem. Mit reagieren-native-Fetch-Blob:

RNFetchBlob 
     .config({ 
      fileCache : false, 
      appendExt : 'jpg' 
     }) 
     .fetch('GET', this.state.path) 
     .then((res) => { 
      let base64Str = res.base64().then((result)=>{ 
       this.setState({imageBase64 : result}) 
       this.webview.postMessage(this.state.imageBase64); 
      }); 
     })