Question

我正致力于在反应网页和反应原生的webview之间传递数据。我想在网页加载后向移动设备上的react-native webview发送信号。

我想知道为什么在反应网页上window.postMessage()除非与setTimeout一起使用，否则不起作用。控制台中根本没有任何错误，但为了工作，它必须延迟大约500。有谁能解释一下？我更喜欢避免使用setTimeout，因为它感觉不可靠。

@observer
class TalkToMobile extends React.Component {
    @observable message;
    render() {
        return (
            <div>
                {
                    message ?
                        <Editor data={this.message}/>: null
                }
           </div>
        )
    }


    componentDidMount() {

        document.addEventListener('message', (e: any) => {
            if (e.data) {
                this.message = JSON.parse(e.data);
            }
        });

        let payload = {};
        payload.command = "giveMeData";
        window.postMessage(JSON.stringify(payload), "*")

        /*
        setTimeout(()=>{
            let payload = {};
            payload.command = "giveMeData";
            window.postMessage(JSON.stringify(payload), "*")
        }, 500);*/
    }
}

Answer 1

您可能需要在向其发布消息之前等待webview加载，因此在webview onLoad回调中进行此操作是有意义的。请尝试以下方法：

...
onWebViewLoaded() {
  if (this.webview) {
    this.webview.postMessage('');
  }
}

render() {
  return (
    <WebView
      ref={webview => { this.webview = webview }}
      source={{uri: 'https://facebook.github.io/react/'}}
      onLoad={this.onWebViewLoaded}
    />
  )
}
...

如果您要将消息从webview发布到应用，请尝试在componentDidUpdate中处理。当它被解雇时，DOM被加载，不需要setTimeout

如果没有在React中的setTimeOut，window.postMessage在componentDidMount中不起作用

1 个答案: