RN中webview的一些思考

时间：2023-03-10 07:25:52
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}

        />;

    }

}

　　

相关文章