React Native WebView onMessage 调用会阻止 WebView 执行 onLoadEnd

Question

这是我尝试测试的一个简单的WebView。以下代码在控制台中返回以下内容：

Handle Load Start
Handle Load
Handle Load End
Handle Load Start
{"listening":"Sup"}

export default class SimpleWebview extends React.Component {
  handleOnLoadStart = e => {
    console.log(`Handle Load Start`)
  }
  handleOnLoad = e => {
    console.log(`Handle Load`)
  }
  handleOnLoadEnd = e => {
    console.log(`Handle Load End`)
  }
  handleError = e => {
    console.log(`Handle Error`)
  }
  handleMessage = e => {
    const { data } = e.nativeEvent
    console.log(data)
  }
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <View
          style={styles.webviewWrapper}
          ref={webviewRef => {
            this.webviewRef = webviewRef
          }}
        >
          <WebView
            ref={webView => {
              this.webView = webView
            }}
            source={{ html: '<h1>Simple webview</h1>' }}
            javaScriptEnabled
            injectedJavaScript={`window.postMessage(JSON.stringify({ listening: 'Sup' }), '*')`}
            onLoad={this.handleOnLoad}
            onLoadEnd={this.handleOnLoadEnd}
            onLoadStart={this.handleOnLoadStart}
            onMessage={this.handleMessage}
            startInLoadingState
          />
        </View>
      </SafeAreaView>
    )
  }
}

据我了解，injectedJavascript在 webview 完成加载后执行，但是，我不确定为什么它会调用 onLoadStart 方法。那岂不是会引入无限循环？

我正在尝试在 web 视图和应用程序之间建立连接，我可以在不同时间调用方法，它会在 web 视图中执行某些功能。

我错过了什么吗？

Answer 1

只有Onload、OnloadStart或OnloadEnd中的一个。

如果您必须全部使用它，这并不重要。

有关组件，请参阅手册。

onMessage在向 Web 查看消息时使用。

示例网络视图.js：

onLoadEnd() {
    const user = this.state.messageusername;
    const data = { messageType: "webview", user }; 
    this.webview.postMessage(JSON.stringify(data));
  }

网络侦听器：

window.onload = function() {
            document.addEventListener('message', function(e) {
              let tes = JSON.parse(e.data);
          alert(tes.data);
});
}