RN中webview的一些思考
刚开始只是对接一下RN,h5部分,嵌套在RN里的webview里需要隐藏一些原生的按钮,遇到很多沟通上的问题,本来没使用RN之前,也是嵌套在webview里,也没什么问题,突然RN嵌套就有问题了,对方一直督促h5改动,出于对RN的好奇,和对自己技术的自信,改就改吧,postmessage,这东西也很好,但RN很坑,注入js会有问题,有延迟,h5发送postmessage也有问题,得延迟发送,具体时间还判断不出来,虽然有issue说根据window下的postmessage进行判断,但也是没啥效果,经过很多次沟通,最终由我提出了一个解决方案,如下:
webview中有钩子,onload后执行隐藏功能,本身就是RN的功能,自己执行多方便,非要h5执行;
附上两个issure
https://github.com/facebook/react-native/issues/11594,解释了为什么要延迟
https://github.com/react-native-community/react-native-webview/issues/702 解释了,升级后的webview为什么postmessage不能直接用
import React from 'react'; import { WebView } from 'react-native'; export default class Brand extends React.Component<any, any> { public hideActionBar(){ // 隐藏按钮的逻辑 } public render(): React.ReactNode { const { navigation } = this.props; const { state } = navigation; const { params } = state; return <WebView ref={'webview'} source={{ uri: params.url }} onLoadEnd={this.hideActionBar} />; } }
学而不思则罔,思而不结则殆,结而不看,一事无成