一、前言：
react-navigation 3.x 版本中， 使用createDrawerNavigator 替換 原先的DrawerNavigator 方法；
那么，當前createBottomTabNavigator、createStackNAvigator、createDrawerNavigator、createSwitchNavigator四兄弟齊全；
無論使用哪一個，或者使用一個包含另一個，他們都有最終的“爸爸”——createAppContainer。
二、react-navigation 延伸
- createStackNAvigator —— StackActions
- createDrawerNavigator —— DrawerActions
- createSwitchNavigator —— SwitchActions
StackActions、DrawerActions、SwitchActions都是對應create方法的；
而且都三者都擴展了 NavigationActions 中的方法
三、使用分析
const MainDrawer = createDrawerNavigator({ MainStack: MainStack, },{ order: ['MainStack'], initialRouteName: 'MainStack', drawerLockMode: 'locked-closed', drawerWidth: width*0.75, drawerPosition: 'left', useNativeAnimations: true, overlayColor: 'rgba(0,0,0,0.6)', contentComponent: (props) => <CustomDrawerComponent {...props} />,
contentOptions: { activeTintColor: '#fb7299', activeBackgroundColor: '#ccc', inactiveTintColor: 'balck', } })
initialRouteName-第一次加載時初始選項卡路由的 routeName。order-定義選項卡順序的 routeNames 數組。
drawerWidth- 定義抽屜的寬度，一般使用屏寬的百分比。drawerPosition- 可選值：left或right， 默認值：left。contentComponent-用於呈現抽屜內容 (例如, 導航項) 的組件。可以完全使用自定義組件 。useNativeAnimations- 使用原生動畫， 默認值：true。drawerBackgroundColor- 使用抽屜背景色， 默認值：white。contentOptions-配置抽屜內容, 請參閱下面。items- 路由數組，可以修改或覆蓋activeItemKey- 識別活動路線的關鍵字activeTintColor-活動選項卡的標簽和圖標顏色。activeBackgroundColor-活動選項卡的背景色。inactiveTintColor-"非活動" 選項卡的標簽和圖標顏色。inactiveBackgroundColor-非活動選項卡的背景色。onItemPress (路由)-按下某項時調用的函數itemsContainerStyle-內容節的樣式對象itemStyle樣式對象的單個項, 可以包含圖標和/或標簽labelStyle樣式對象要覆蓋文本樣式內部內容部分, 當您的標簽是一個字符串activeLabelStyle樣式對象若要改寫活動標簽的文本樣式, 則標簽為字符串 (合並使用labelStyle)inactiveLabelStyle樣式對象在標簽為字符串時覆蓋文本樣式的非活動標簽 (與labelStyle合並)iconContainerStyle- 用於覆蓋View圖標容器樣式的樣式對象。overlayColor- 可以修改抽屜剩余部分的背景色。- drawerLockMode - 指定抽屜的鎖定模式，
'unlocked','locked-closed,'locked-open'。
四，注意點
1. useNativeAnimations 需要設置為 true，否則抽屜的動畫會很生澀；
2. overlayColor 可以修改抽屜剩余部分的顏色，因為自帶透明度，所以僅僅修改顏色不能修改透明的，但是我們可以通過 rgba(0,0,0,0.x) 來達到效果
3. drawerLockMode - 指定抽屜的鎖定模式，
'unlocked', 表示無鎖狀態，可以通過手勢或代碼，打開關閉抽屜'locked-closed, 表示抽屜是關閉狀態時，不能通過手勢打開，只能通過代碼'locked-open'，表示抽屜是打開狀態時，不能通過手勢關閉，只能通過代碼
4. 代碼 打開和關閉抽屜的方法：
- this.props.navigation.openDrawer(); 可以打開抽屜
- this.props.navigation.closeDrawer(); 可以關閉抽屜
- this.props.navigation.toggleDrawer(); 可以打開/關閉抽屜