react-native-webview postMessage

react-native-webview 是 react-native 基础组件 Webview 的副本, 在 react-native0.60 版本中完全删除 WebView

关于 RN 和 js 的交互, 网上有很多相关的文档, 这里就不再说了, 期中 RN 调用 js方法则要依赖 WebView 的 postMessage 方法, 向 js 发送消息.

在最新的一次实践中, 发现 postMessage 方法不起作用了, 那么 RN 应该怎么调起 js 方法呢? 在 react-native-webview 的 issues 中找到了 react-native-webview 贡献者给出的答案

demo在这里

原文地址在这里
下面引用原回答

When you use injectJavascript, the passed string gets evaluated in the browser window so you could use something like:

const generateOnMessageFunction = (data: string) =>
  `(function() {
    window.whateverYourListenerIsNamed.onMessage(${JSON.stringify(data)});
  })()`;

And then call

// 注意 实际使用中, 直接 webViewRef.injectJavaScript('')
webViewRef.current.injectJavaScript(
   generateOnMessageFunction(message),
);

答案中表示: 在现在的 react-native-webview 中, 新增了一个 injectJavaScript 方法(非 WebView props 中的 injectJavaScript ), 使用 injectJavaScript 可以向 webView 注入一段立即执行的代码, 也就是说, 可以利用 injectJavaScript 方法直接调用 js 方法, 相比 postMessage 简单太多了

具体使用如下:
首先, 将要调用的方法注入到 webView 中

// 注入一个方法并绑定给 window.launchScan 以备 RN 调用
js = `
window.launchScan = function(){
}
`
render() {
    return (
          <WebView
               ref={ref => this.web = ref}
               injectedJavaScript={js}
           />
    )
}

当需要调用的时候

this.web && this.web.injectJavaScript(`window.launchScan()`);

补充

至于 web 调用 RN 方法, 仍旧使用 window.ReactNativeWebView.postMessage

// 将下面 js 注入到 web
` 
function callRn(){
  window.ReactNativeWebView.postMessage(JSON.stringify({data:res, callback:'launchScanCallback',type:3}));
}
`
// 通过 onMessage 接受
<WebView
    ref={ref => this.web = ref}
    onMessage={(eve) => this._onMessage(eve.nativeEvent.data)}
/>