React原生版本:0.60
库使用:react-本机-webview(版本: 9.0.1)
发布:
当我将postMessage (this.webView.postMessage('somedata')
)从反应本机事件处理程序发送到webview时,onMessage不会被触发。但是onMessage确实会在由webview发送的事件中触发。
解决方案尝试了:
同时添加了document.eventListener和window.eventListener。但是,当我从react本地onMessage postMessage时,还没有触发postMessage。
任何帮助都将不胜感激。
代码:
// On Click, the following function will run
_sendPostMessage = () => {
//data sent to webview
this.webView.postMessage("getAuthToken");
}
// Inside render() function
<WebView
ref={(webView) => this.webView = webView}
style={styles.webView}
source={{ uri: event.ticket_form_url, headers: headers }}
injectedJavaScript={jsCode}
onMessage={this.onMessage}
renderLoading={this._renderActivityIndicator}
startInLoadingState={true}
/>
// Injected javscript code below
var jsCode = `
(function() {
window.postMessage = function(data) {
window.ReactNativeWebView.postMessage(data);
};
})()
(function() {
var originalPostMessage = window.postMessage;
var patchedPostMessage = function(message, targetOrigin, transfer) {
originalPostMessage(message, targetOrigin, transfer);
};
patchedPostMessage.toString = function() {
return String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage');
};
window.postMessage = patchedPostMessage;
})();
window.addEventListener("message", function(event) {
var uat = ''
if (window.userAuthenticationToken) {
uat = window.userAuthenticationToken()
}
window.postMessage('setAuthToken,' + uat)
});
document.addEventListener("message", function(event) {
var uat = ''
if (window.userAuthenticationToken) {
uat = window.userAuthenticationToken()
}
window.postMessage('setAuthToken,' + uat)
});
`;
// onMessage
onMessage = (event) => {
//data received from webview
console.log('Reached onMessage', event.nativeEvent.data);
var response = event.nativeEvent.data
var data = response.split(',')
}
发布于 2020-07-12 14:38:40
你好,您必须使用post消息作为injectedJavascript。例如,
<WebView
source={{ uri:'https://stackoverflow.com' }}
injectedJavaScript="window.ReactNativeWebView.postMessage(document.title)"
onMessage={event => setTitle(event.nativeEvent.data)}
/>
您可以将此包用于美容UI的webview。https://github.com/ilkerkesici/react-native-beauty-webview
https://stackoverflow.com/questions/60811667
复制相似问题