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

Posted 2022-02-15 nangezi

 

一、前言： 

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