android - 如何解决 postMessage from WebView to React Native does not work for Android

Question

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

Android 上的 React Native 应用程序无法接收从注入(inject) WebView 的 js 代码(const simple)发送的 post 消息。

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
• native react :0.50.4

开启: - Android 模拟器版本 26.0.0-3833124，Android 7.1.1，API 25 - 安卓原生设备ONE E1005(一加X)，安卓版本6.0.1，API 23

谁能够让 postMessage 在 Android 设备/模拟器上正常工作(WebView --> RN)或者认为他们知道怎么做？

Answer 1

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

我在我的网页上使用这个小 helper 来绕过它:

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),"*");
});