RN中webview的一些思考

刚开始只是对接一下RN，h5部分，嵌套在RN里的webview里需要隐藏一些原生的按钮，遇到很多沟通上的问题，本来没使用RN之前，也是嵌套在webview里，也没什么问题，突然RN嵌套就有问题了，对方一直督促h5改动，出于对RN的好奇，和对自己技术的自信，改就改吧，postmessage，这东西也很好，但RN很坑，注入js会有问题，有延迟，h5发送postmessage也有问题，得延迟发送，具体时间还判断不出来，虽然有issue说根据window下的postmessage进行判断，但也是没啥效果，经过很多次沟通，最终由我提出了一个解决方案，如下：

webview中有钩子，onload后执行隐藏功能，本身就是RN的功能，自己执行多方便，非要h5执行；

附上两个issure

<!-- p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; line-height: 19.0px; font: 13.0px 'Helvetica Neue'; color: #118eff} -->

https://github.com/facebook/react-native/issues/11594，解释了为什么要延迟

https://github.com/react-native-community/react-native-webview/issues/702 解释了，升级后的webview为什么postmessage不能直接用

代码语言：javascript复制

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}
        />;
    }
}

webview html5 react https github

0 人点赞