Stories

Detail Return Return

RN中webview的一些思考 - Stories Detail

遇到的坑: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}
        />;
    }
}

感覺對你有幫助的話,支持一下哈

Add a new Comments

Some HTML is okay.