RN中webview的一些思考

Posted 2022-05-17 windseek

刚开始只是对接一下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
        />;