React-Native-Navigation - 在選項卡更改時觸發事件

Question

我正在與react-native進行工作，其中react-native-navigation。我有一個與標籤事件相關的問題。

我想在選擇特定選項卡時加載數據。

在此先感謝

Answer 1

至於RNN v1.1.x，有聽選項卡點擊雙向的。

設置選項卡單擊監聽

import { 
    NativeAppEventEmitter, 
    DeviceEventEmitter, 
    Platform 
} from 'react-native'; 

let eventSubscription; 

export class TabSelectionListener { 
    register() { 
    this.unregister(); 
    eventSubscription = this.getEventEmitter().addListener('bottomTabSelected', (event) => { 
     const currentTab = biLabels[event.unselectedTabIndex]; 
     const targetTab = biLabels[event.selectedTabIndex]; 
     console.log(`Switching tab from ${currentTab} to ${targetTab}`) 
     if (targetTab === dataTab) { 
     // load data now 
     } 
    }); 
    } 

    unregister() { 
    if (eventSubscription) { 
     eventSubscription.remove(); 
    } 
    } 

    getEventEmitter() { 
    return Platform.OS === 'android' ? DeviceEventEmitter : NativeAppEventEmitter; 
    } 
} 

聽在標籤中顯示的根屏幕選項卡中單擊

從docs

class ExampleScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 
    } 

    onNavigatorEvent(event) { 
    if (event.id === 'bottomTabSelected') { 
     console.log('Tab selected!'); 
    } 
    if (event.id === 'bottomTabReselected') { 
     console.log('Tab reselected!'); 
    } 
    } 
} 

聽屏幕可視性變化

來自 docs的

：

export default class ExampleScreen extends Component { 
    constructor(props) { 
    super(props); 
    this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this)); 
    } 
    onNavigatorEvent(event) { 
    if (event.id === 'willAppear') { 
     // Load data now 
    } 
    } 
} 

Answer 2

您可以通過使用減速機只需創建中，你必須要檢查情景鍵的方法得到這一點，如果這是你想要的選項卡，你可以有你的執行行動......並調用這個函數在你的路由器作爲道具。這是我爲我的標籤應用程序所做的工作。

reducerCreate = params => { 
     const defaultReducer = new Reducer(params); 
     return (state, action) => { 
     switch(action.type){ 
      case ActionConst.JUMP: 
       if(action.key ==="Tab1") { 
        //Action for Tab1. 
       } 
       else if(action.key ==="Tab2") { 
        //Action for Tab2. 
       } 
     } 
     return defaultReducer(state, action); 
    }; 
}; 

     <Router 
       createReducer={this.reducerCreate} 
       navigationBarStyle={styles.navBar} 
       titleStyle={styles.navBarTitle} 
      > 

       <Scene initial 
        style={{paddingTop: 0}} 
        key="home" 
        component={Home} 
        > 
        <Scene 
         key="Tab1" 
         component={Tab1View} 
        /> 
        <Scene 
         key="Tab2" 
         component={Tab2View} 
        /> 
      </Scene> 
    </Router>