react-navigation 的抽屉效果 createDrawerNavigator (DrawerNav

?

一、前言：?

?　　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.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.x) 来达到效果

3.?drawerLockMode -?指定抽屉的锁定模式，

• ‘unlocked‘,表示无锁状态，可以通过手势或代码，打开关闭抽屉?
• ‘locked-closed,表示抽屉是关闭状态时，不能通过手势打开，只能通过代码
• ‘locked-open‘，表示抽屉是打开状态时，不能通过手势关闭，只能通过代码

?4. 代码 打开和关闭抽屉的方法：

• this.props.navigation.openDrawer(); 可以打开抽屉
• this.props.navigation.closeDrawer(); 可以关闭抽屉
• this.props.navigation.toggleDrawer(); 可以打开/关闭抽屉