React-Native之WebView组件 - Native与Web的通信和交互

文档地址：https://github.com/react-native-community/react-native-webview/blob/master/docs/Guide.md#communicating-between-js-and-native

 

WebView组件是RN端与Web端交互的一个常用组件。

原本WebView组件是放在react-native组件库当中的，现在RN把它从组件库当中移除了，放到了react-native-webview库当中。最近我在升级公司RN项目的app，在适配WebView组件当中遇到很多问题，特此记录一下，避免再次踩坑。

 

 

RN端与Web端的通信和交互方式有三种：

（1）React Native -> Web: The injectedJavaScript prop

（2）React Native -> Web: The injectJavaScript method

（3）Web -> React Native: The postMessage method and onMessage prop

React Native -> Web

1 The injectedJavaScript prop

- RN端注入JS脚本到Web端。

- 这是一个脚本，该脚本在首次加载网页后立即运行。

- 即使页面重新加载或导航离开，它也只能运行一次。