遇到的坑: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}
/>;
}
}
感覺對你有幫助的話,支持一下哈