RN中webview的一些思考

杨龙飞

遇到的坑:webview和h5通信时,会有一些延迟导致不能立即生效
具体描述:在使用react-native时,需要加载外部网页,加载后,RN提供一个按钮可以关闭网页,但如果打开的是内部网页就需要隐藏这个按钮,h5代码使用react写的,在componentDidMount时,发送postmessage给客户端(RN),此时发现收不到,查阅react-native官方文档后得已解决。
解决过程:
https://github.com/facebook/r...,解释了为什么要延迟
https://github.com/react-nati... 解释了,升级后的webview为什么postmessage不能直接用

import React from 'react';
import { WebView } from 'react-native';

export default class myComponent extends React.Component<any, any> {
    public hide(){
        // 隐藏按钮的逻辑
        // 建立一个白名单,在白名单里的域名隐藏按钮,之外的不做处理
    }
    public render(): React.ReactNode {
        const { navigation } = this.props;

        const { state } = navigation;

        const { params } = state;

        return <WebView
            ref={'webview'}
            source={{ uri: params.url }}
            onLoadEnd={this.hide}
        />;
    }
}

感觉对你有帮助的话,支持一下哈

阅读 2.6k

大话前端
主要是自己平时工作时遇到的一些坑,记录下来,然后分享出去

喜欢思考,喜欢前端,喜欢交友,喜欢玩

42 声望
2 粉丝
0 条评论

喜欢思考,喜欢前端,喜欢交友,喜欢玩

42 声望
2 粉丝
文章目录
宣传栏