Question

这个基本的postMessage示例适用于IOS，但不适用于Android 。

Android上的React Native应用程序无法接收从注入WebView的js代码（const simple）发送的帖子消息。

import React, {Component} from 'react';
import {
    WebView
} from 'react-native';

export default class App extends Component<{}> {
    render() {
        const simple = function() { window.postMessage('my message from Webview to RN');}
        const postMessageCode = '(' + String(simple) + ')();';
        return (
            <WebView
                source={{uri: 'https://github.com/facebook/react-native'}}
                injectedJavaScript={postMessageCode}
                onMessage={this.onWebViewMessage}
            />
        );
    }

    onWebViewMessage(event) {
        alert(event);
    }
}

这已经过测试：

react-native-cli：2.0.1
react-native：0.50.4

在： - Android模拟器版本26.0.0-3833124，Android 7.1.1，API 25 - Android原生设备ONE E1005（One plusX），Android 6.0.1版，API 23

谁能够在Android设备/模拟器上运行postMessage（WebView - ＆gt; RN），或者认为他们知道如何使用？

Answer 1

我遇到了同样的问题。 React Native上的Android浏览器似乎延迟了将监听器附加到postMessage。见https://github.com/facebook/react-native/issues/11594

我在网页上使用这个小助手来解决它：

var message = 'some message string';

window.parent.postMessage(message,"*"); 

function whenRNPostMessageReady(cb) {
    if (postMessage.length === 1) cb();
    else setTimeout(function() { whenRNPostMessageReady(cb) }, 100);
}
whenRNPostMessageReady(function() {
    //react native accepts strings only
    window.parent.postMessage(JSON.stringify(message),"*");
});

如何解决从WebView到React Native的postMessage不适用于Android

1 个答案: