私はReactのように聞いたのでReactをあなたのReactネイティブに入れます

Question

React insideを実行することが可能webView React（ネイティブではない）コードがネイティブアプリと通信できる方法でReact Native？

この理由は私のアプリのいくつかの側面が反応ネイティブのパフォーマンスなどの利点を必要とする一方で、そのほとんどがのWebView内で実行できることだけで結構です、と私は本当に物事を書き換えないようにしたいと思いますDOMにレンダリングします。

は、私はまたthis packageはあなたが必要な正確に何を行い、何とかのWebView、すなわち：

nativeBridge.doSomethingThatBrowserCant(); 

Answer 1

はい内のJSにブリッジオブジェクトを公開します。

本質的には、WebViewからReact Nativeにメッセージを送信しています。それで、あなたはそれらを使いたいことができます。これらのメッセージは単純な文字列ですが、JSON.stringifyでより複雑なデータを送信できます。

const injectScript = ` 
    (function() { 
     if (WebViewBridge) { 
      WebViewBridge.onMessage = function (message) { 
       if (message === 'native.didSomething') { 
        // Domething was done inside of React Native. 
        console.log('native.didSomething'); 
       } 
      }; 

      WebViewBridge.send('native.doSomething'); 
     } 
    }()); 
`; 

class Example extends Component { 
    doSomething() { 
     // Do something inside of React Native. 
     this.refs.webviewbridge.sendToBridge('native.didSomething'); 
    } 

    onBridgeMessage(message) { 
     const {webviewbridge} = this.refs; 

     if (message === 'native.doSomething') { 
      this.doSomething(); 
     } 
    } 

    render() { 
     return (
      <WebViewBridge 
       ref="webviewbridge" 
       onBridgeMessage={this.onBridgeMessage.bind(this)} 
       injectedJavaScript={injectScript} 
       source={{uri: "http://google.com"}} 
      /> 
     ); 
    } 
}