「React Native」react-native-webvi

一、背景说明：

RN升级到0.61.5之后，webview从react native官方api中删除，官方推荐采用react-native-webview

二、react-native-webview与h5交互

1.rn给h5发事件，可以通过拿到webview的ref，this.webview.postMessage("")发消息。
2.h5给rn发事件，bridge name更新了，需要h5采用window.ReactNativeWebView.postMessage("")发消息。RN webview就可以通过onMessage收到消息。

三、安卓交互实现

1.h5给安卓，是通过bridge name，addJavascriptInterface方式来收到h5的消息。
2.安卓给h5，是通过自执行function，document.dispatchEvent。

四、苹果交互实现

亮点：磨平平台差异的核心源码

    NSString *source = [NSString stringWithFormat:
      @"window.%@ = {"
       "  postMessage: function (data) {"
       "    window.webkit.messageHandlers.%@.postMessage(String(data));"
       "  }"
       "};", MessageHandlerName, MessageHandlerName
    ];

1.h5给苹果，通过自执行函数，将window.ReactNativeWebView.postMessage转换成ios交互 window.webkit.messageHandlers.ReactNativeWebView.postMessage(String(data))

2. 苹果给h5，也是通过自执行函数，window.dispatchEvent。

五、坑

APP给h5发消息，安卓和苹果发送消息方式不一致。安卓通过document.dispatchEvent,苹果通过window.dispatchEvent。因此h5只通过document.addEventListener是无法收到ios消息的。

六、解决方法

ios修改与h5交互的方法，将window改为document与安卓一致。因为window的作用域比document更大，且影响更广。