React Native - Webview呼び出しネイティブ関数に反応する

Question

WebViewコンポーネント内で関数を作成し、ネイティブ関数をトリガーすることは可能ですか？

Answer 1

これは可能ですが、これを行う唯一の方法であるかどうかはわかりません。

基本的には、onNavigationStateChangeイベントハンドラを設定し、関数呼び出し情報をナビゲーションURLに埋め込むことができます。ここではその概念の例を示します。

では

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 

} 

はただのWebViewのナビゲーションイベントをトリガし、これを使用して、ネイティブメソッドを呼び出すには、ネイティブコンテキストを反応させ、URL内の関数呼び出し情報を埋め込みます。

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

Answer 2

はい、可能ですが、それはreact-native-webview-bridgeのパッケージに存在します。 私はそれを生産に多量に使用しました。

Answer 3

あなたは、私はわからないが、私の意見はある負荷にWebViewのにJavaScript関数を注入した後、あなたはより多くの情報IN Here

Answer 4

を注入された機能からの応答を得るためのonMessageを使用することができます -

することができますない。 Webviewは、Webviewコンポーネントで定義できるjsパーツだけを読み込むことができます。これは他のコンポーネントとはまったく別物であり、可視領域にすぎません。