来自 event.nativeEvent.data 的事件记录为 setImmediate$0.4162155499933975$1答案

【问题标题】：Event from event.nativeEvent.data logs as setImmediate$0.4162155499933975$1来自 event.nativeEvent.data 的事件记录为 setImmediate$0.4162155499933975$1
【发布时间】：2020-05-19 23:11:59
【问题描述】：

我正在尝试使用 Webview（react-native）将令牌和其他用户详细信息从 React Web 应用程序传递到 React Native 应用程序。

当我这样做时

window.postMessage(JSON.stringify(reactNativeObj), '*');

并使用

在 React 本机应用程序中记录事件

console.log( "On Message", event.nativeEvent.data );

将日志打印为

On Message: setImmediate$0.4162155499933975$1

它应该打印我的对象。

我几乎尝试了所有方法并重新阅读了文档https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage，但无法使其工作。

任何帮助将不胜感激。

【问题讨论】：

这可能会有所帮助：stackoverflow.com/a/57227576/5793132
@TrueTiem 我正在从网络视图中获取事件，但它返回为setImmediate$0.41236..。
尝试将window.postMessage... 更改为window.ReactNativeWebView.postMessage(...。也尝试 JSON.parse 你的对象并单独记录它以查看打印的内容
你使用的是哪个版本的 React Native 和 react-native-webview？

标签： android react-native

【解决方案1】：

如果您使用的是RN >= 0.60，那么您使用的是react-native-webview >= 8.0.0，您必须使用window.ReactNativeWebView.postMessage。

如果您有访问权限并且可以编辑网站代码，那么您应该像这样添加postMessage 调用：

if (window.ReactNativeWebView) {
  window.ReactNativeWebView.postMessage(JSON.stringify(reactNativeObj));
}

如果您无权访问网站代码或不想更改其内容，则可以注入一些修改 window.postMessage 的代码以使用 window.ReactNativeWebView.postMessage 以及默认方法：

const WebView_Injection_postMessage = `
(function() {
  window.default_postMessage = window.postMessage;
  window.postMessage = function(data, domain) {
    window.default_postMessage(data, domain);
    if (window.ReactNativeWebView) {
      window.ReactNativeWebView.postMessage(data);
    }
  }
})();
`;

const App: () => React$Node = () => {
  const [result, setResult] = useState('');

  function onWebViewMessage(event) {
    console.log('onWebViewMessage', event.nativeEvent.data);

    setResult(JSON.stringify(JSON.parse(event.nativeEvent.data), null, 2));
  }

  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView style={styles.container}>
        <View style={styles.webViewContainer}>
          <WebView
            source={{ uri: 'https://zikro.gr/dbg/so/60052061/react' }}
            style={styles.webWiew}
            injectedJavaScript={WebView_Injection_postMessage}
            onMessage={onWebViewMessage}
          />
        </View>
        <View style={styles.resultView}>
          <Text style={styles.resultText}>{result}</Text>
        </View>
      </SafeAreaView>
    </>
  );
};
`;

https://zikro.gr/dbg/so/60052061/react 的网络应用是一个 React 16 开发应用，代码如下：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

class App extends React.Component {
  postMessage = () => {
    console.log('Posting message...');

    const reactNativeObj = {
      location: window.location.href,
      title: document.title,
      dt: (new Date).toISOString()
    }

    window.postMessage(JSON.stringify(reactNativeObj), '*');
  }

  render() {
    return (
      <button onClick={this.postMessage} id="post-message">Post Message</button>
    )
  };
}

ReactDOM.render(<App/>, document.getElementById('main'));

</script>

最后但同样重要的是，window.ReactNativeWebView.postMessage 只接受一个带有要发送数据的参数，并且它必须是一个字符串。

window.ReactNativeWebView.postMessage only accepts one argument which must be a string.

以下是正在运行的应用程序的屏幕截图：

【讨论】：