1. react-navigation7種常見導(dǎo)航

• createStackNavigator 普通的Navigator,屏幕上方導(dǎo)航
• createTabNavigator：createBottomTabNavigator和 createMaterialTopTabNavigator
• createBottomTabNavigator:屏幕下方標簽欄
• createMaterialTopTabNavigator：屏幕上方標簽欄
• createDrawerNavigator:抽屜效果導(dǎo)航，android左側(cè)劃入menu
• createSwitchNavigator:一次只顯示一個頁面

2.導(dǎo)航器所支持的Props

const SomeNav = createStackNavigator/createBottomTabNavigator({
    //config
})
<SomeNav
   screenProps={xxx}
   ref={nav => {navigation = nav;}}
   onNavigationStateChange(prevState,newState,action) =>{
}
/>

• ref:可以通過ref屬性來獲取navigation；
• onNavigationStateChange(prevState,newState,action):每次當導(dǎo)航器的管理的state發(fā)生變化時，都會回調(diào)該方法；prevState表示變化之前的state；newState表示新的state；action表示導(dǎo)致變化的action；
• screenProps：向子屏幕傳遞額外的數(shù)據(jù)，子屏幕可以通過this.props.screenProps獲取到該數(shù)據(jù)

3.navigation包含的功能

• navigate:跳轉(zhuǎn)到其他頁面
• state：屏幕當前的state
• setParams：改變路由的params；
• goBack：關(guān)閉當前屏幕；
• dispatch：向路由發(fā)送一個action
• addListener: 訂閱導(dǎo)航生命周期的更新
• isFocused：true標識屏幕獲取了焦點
• getParam：獲取具有回退的特定參數(shù)

如果一個navigation沒有navigate，setParams以及goBack,可以使用navigation去dispatch一個action去跳轉(zhuǎn)新頁面

const {navigation,theme,selectedTab} = this.props;
const resetAction = StackActions.reset({
    index:0,
   actions:[
         NavigationActions.navigate({
             routeName:'HomePage',
             params:{
               theme:theme,
               selectedTab:selectedTab
         },  
      })
   ]
})
navigation.dispatch(resetAction)