react-native-scrollable-tab-view是一個用了做頂部tab切換的一個組件它自帶一個onChangeTab事件在切換tab的時候觸發回調
在回調裏面我們可以調用當前高亮tab對應content組件的發起數據請求的函數
現在遇到一個需求,頁面切換的時候(從其他頁面進入當前包含react-native-scrollable-tab-view組件的頁面和回退進入react-native-scrollable-tab-view頁面的時候都需要刷新當前高亮tab頁面的數據)
我們的項目用到了react-navigation第三方組件,它提供了頁面獲取焦點的事件監聽,代碼使用如下:
componentDidMount() {
action(this.props.navigation);
console.log("回退我還會執行??")
//詳情頁回退時候刷新對應的tab下的列表
this.didFocusSubscription = this.props.navigation.addListener(
'didFocus',
payload => {
console.log("回退刷新&&切換app黑屏和亮屏時候刷新&&初始進入時候刷新")
this.reloadList();//刷新當前高亮的tab對應的函數
},
);
}
componentWillUnmount() {
this.didFocusSubscription.remove();
}
這個代碼應該寫在當前主頁面,而不是每個tab對應的content組件都寫一遍
目前遇到一個坑點就是把當前的navigation當做props傳給每個tab對應的content,並且把上面那個代碼複製一遍
這不僅僅導致代碼重複,而且主頁面獲取焦點的時候,會導致每個tab對應content組件下面的事件監聽都會執行一遍
正確姿勢:每個tab的content組件都寫好刷新數據的接口(函數),在主頁面寫獲取焦點的事件監聽,在this.reloadList()裏面觸發當前tab對應content組件下東西刷新數據的函數