React Native - Webview Aufruf React Native Funktion

Question

Ist das möglich, erstellen Sie eine Funktion innerhalb der WebView Komponente, Trigger React Native-Funktion?

Answer 1

Es ist möglich, aber ich bin mir nicht sicher, ob es der einzige Weg ist, dies zu tun.

Grundsätzlich können Sie eine onNavigationStateChange Event-Handler und Funktionsinformationen in Navigations-URL einbetten, hier ein Beispiel für das Konzept.

In Reaktion india Kontext

render() { 

    return <WebView onNavigationStateChange={this._onURLChanged.bind(this)} /> 
} 

_onURLChanged(e) { 

    // allow normal the natvigation 
    if(!e.url.startsWith('native://')) 
     return true 
    var payload = JSON.parse(e.url.replace('native://', '')) 
    switch(e.functionName) { 
     case 'toast' : 
      native_toast(e.data) 
     break 
     case 'camera' : 
      native_take_picture(e.data) 
     break 
    } 
    // return false to prevent webview navitate to the location of e.url 
    return false 

} 

native Methode aufzurufen, diese verwenden nur webview Navigationsereignis auslösen und die Funktion Anrufinformationen in URL einbetten.

window.location = 'native://' + JSON.stringify({ 
    functionName : 'toast', data : 'show toast text' 
}) 

Answer 2

ja, es ist möglich, existe es ein Paket für die react-native-webview-bridge. Ich habe es stark in der Produktion verwendet und es funktioniert perfekt.

Answer 3

Sie könnten eine Javascript-Funktion in die Webansicht auf Last injizieren und verwenden dann onMessage Antwort von der Funktion erhalten Sie weitere Informationen injiziert IN Here

Answer 4

Ich bin nicht sicher, aber meiner Meinung nach -

Sie können nicht. Webview kann nur den js-Teil laden, den wir in der Webview-Komponente definieren können. Dies ist völlig getrennt von anderen Komponenten, es ist nur ein sichtbarer Bereich.