一、前言：
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(); 可以打开/关闭抽屉