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 贡献者给出的答案
原文地址在这里
下面引用原回答
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)}
/>
