react-native-webview this.webView.postMessage不工作

Question

以前的版本不起作用，因为它是新的。

"react-native-webview"："^9.0.2“"react-native"："0.62.0"，

2. webview options
javaScriptEnabled={true}
mediaPlaybackRequiresUserAction={false}
startInLoadingState={true}
allowUniversalAccessFromFileURLs={true}
onMessage={this.respondToOnMessage}

3. react-native code
this.webView.postMessage( "Post message from react native" );

4. web code

function receiveMessage(e) {
    callbackFunction(JSON.parse(e.data));
}
function RNPostMessage(data) {
    window.ReactNativeWebView.postMessage(data);
}
window.addEventListener('message', receiveMessage, true);

5. react-native error msg
D:\dev\projects\mobile-app\react-native\yc_attend\node_modules\react-devtools-core\dist\backend.js:32 Possible Unhandled Promise Rejection (id: 0):
TypeError: Cannot read property 'postMessage' of undefined
TypeError: Cannot read property 'postMessage' of undefined

我想知道这个问题的解决方案。

Answer 1

您必须尝试执行injectJavascript而不是this.webview.postMessage()。我以前也这样做过&伸手让我的数据出现在webview中。尝试在react-native的inject Javascript中使用window.postMessage。在react-native-webview中有注入javascript的属性。

Answer 2

你必须像那样使用它。

<WebView
    source={{ uri: currentUrl }}
    injectedJavaScript="window.ReactNativeWebView.postMessage(document.title)"
    onMessage={event => setTitle(event.nativeEvent.data)}
 />

如果你想要webview的不同道具，你可以看看https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md