Question

我已经在我的react-native组件中创建了一个webview，然后我想使用postMessage发送数据并通过OnMessage读取它。我实际上不知道问题是否出在我的postMessage或webView的onMessage选项中。你能告诉我问题出在哪里吗？这是我的应用程序组件：

      let Script1 = `
      var data = {
      message : "OnFocusEvent"
        };
      window.postMessage(JSON.stringify({data}),"*");
         `;
     export default class App extends Component {
      constructor(props) {
      super(props);}
      render() {
       return (
       <View style={styles.container}>

      <RNEnhanceWebview
      ref={ref => (this.webView = ref)}
      style={{ flex: 1 }}
      source={{
        html:
          ' </br></br></br></br><form> <input id="input" class="input" 
      type="text" placeholder="name"/></form>'
      }}
      keyboardDisplayRequiresUserAction={false} //ios
      autoFocus={true} //android
      injectedJavaScript={Script1}
      automaticallyAdjustContentInsets={false}
      allowFileAccessFromFileURLs={true}
      scalesPageToFit={false}
      mixedContentMode={"always"}
      javaScriptEnabled={true}
      javaScriptEnabledAndroid={true}
      startInLoadingState={true}

      onMessage={event => {
        console.log(event.nativeEvent.data);
        console.log(JSON.parse(event.nativeEvent.data));
      }}
      onLoad={() => {}}
    />
      </View>
       }

您有建议显示我的消息数据吗？

Answer 1

您是对的，看来您的代码在Android上不起作用，但在iOs上可以正常工作...

这是一个奇怪的问题，它看起来好像postMessage在第一页加载上不起作用，但是如果您延迟调用它（如onFocus），它将按预期工作。

例如，尝试以下脚本：

let Script1 = `
    document.getElementById("input").addEventListener("focus", function() {  
      var data = {
          type: "OnFocusEvent",
          message : "OnFocusEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });

    document.getElementById("input").addEventListener("blur", function() {  
      var data = {
          type: "OnBlurEvent",
          message : "OnBlurEvent"
      };
      window.postMessage(JSON.stringify({data}),"*");
    });
`;

onMessage={event => {
    console.log(event.nativeEvent.data);
    console.log(JSON.parse(event.nativeEvent.data));
    const messageData = JSON.parse(event.nativeEvent.data);
    const messageType = messageData.type;

    switch(messageType) {
        case "OnFocusEvent":
         console.log("Do whatever you want onFocus")
         break;
        case "OnBlurEvent":
         console.log("Do whatever you want onBlur")
         break;
        default:
         console.log("do nothing");
         break;
    }
}}

以下是小吃示例：https://snack.expo.io/rkANOd9lN

希望它会有所帮助：）

Answer 2

更改此

window.postMessage(JSON.stringify(data))

对此

window.ReactNativeWebView.postMessage(JSON.stringify(data))

window.postMessage不会将数据发送到OnMessage WebView

2 个答案: