react-navigation 的抽屉效果 createDrawerNavigator (DrawerNavigator)

一、前言：

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