react-native-scrollable-tab-view tab對應content頁面的數據請求的說明

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組件下東西刷新數據的函數
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章