react-native-webview 是 react-native 基礎(chǔ)組件 Webview 的副本, 在 react-native0.60 版本中完全刪除 WebView
關(guān)于 RN 和 js 的交互, 網(wǎng)上有很多相關(guān)的文檔, 這里就不再說了, 期中 RN 調(diào)用 js方法則要依賴 WebView 的 postMessage 方法, 向 js 發(fā)送消息.
在最新的一次實(shí)踐中, 發(fā)現(xiàn) postMessage 方法不起作用了, 那么 RN 應(yīng)該怎么調(diào)起 js 方法呢? 在 react-native-webview 的 issues 中找到了 react-native-webview 貢獻(xiàn)者給出的答案
原文地址在這里
下面引用原回答
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
// 注意 實(shí)際使用中, 直接 webViewRef.injectJavaScript('')
webViewRef.current.injectJavaScript(
generateOnMessageFunction(message),
);
答案中表示: 在現(xiàn)在的 react-native-webview 中, 新增了一個(gè) injectJavaScript 方法(非 WebView props 中的 injectJavaScript ), 使用 injectJavaScript 可以向 webView 注入一段立即執(zhí)行的代碼, 也就是說, 可以利用 injectJavaScript 方法直接調(diào)用 js 方法, 相比 postMessage 簡單太多了
具體使用如下:
首先, 將要調(diào)用的方法注入到 webView 中
// 注入一個(gè)方法并綁定給 window.launchScan 以備 RN 調(diào)用
js = `
window.launchScan = function(){
}
`
render() {
return (
<WebView
ref={ref => this.web = ref}
injectedJavaScript={js}
/>
)
}
當(dāng)需要調(diào)用的時(shí)候
this.web && this.web.injectJavaScript(`window.launchScan()`);
補(bǔ)充
至于 web 調(diào)用 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)}
/>
