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(); 可以打开/关闭抽屉
原文地址:https://www.cnblogs.com/nangezi/p/11091354.html