react-navigation drawer effect createDrawerNavigator (DrawerNavigator)

 

I. Introduction: 

 　　react-navigation 3.x versions, using createDrawerNavigator replace the original DrawerNavigator method;

　　So, the current createBottomTabNavigator, createStackNAvigator, createDrawerNavigator, createSwitchNavigator complete four brothers;

　　No matter which one to use, or use a contains another, they all have the ultimate "Daddy" --createAppContainer.

 

Two, react-navigation extending

• createStackNAvigator —— StackActions
• createDrawerNavigator —— DrawerActions
• createSwitchNavigator —— SwitchActions

　　StackActions, DrawerActions, SwitchActions create a corresponding method are;

　　And all three have extended the method of NavigationActions

 

Third, the use of analysis

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 - when you first load the initial option calories of routeName.
• order - routeNames array of custom tab order.

• drawerWidth - Defines the width of the drawer, the percentage of the screen width is generally used.
• drawerPosition - Possible values:  left or  right, the default leftvalue: .
• contentComponent A drawer assembly for presenting content (e.g., navigation terms) -. You can fully use custom components.
• useNativeAnimations - the use of native animation, default:  true.
• drawerBackgroundColor - Use drawer background color, default: white.
• contentOptions - Configure drawer contents, please see below.
• items - an array of routes, may modify or override the
• activeItemKey - Identify active route keywords
• activeTintColor - label and icon color of the active tab.
• activeBackgroundColor - The background color of the active tab.
• inactiveTintColor - label and icon color "inactive" tab.
• inactiveBackgroundColor - the background color of the inactive tabs.
• onItemPress (路由) - Press the function called when an
• itemsContainerStyle - style object to Section
• itemStyle A single item style object can contain icons and / or labels
• labelStyle To override the style object  文本 style internal content part, when your label is a string
• activeLabelStyle To rewrite the active tab style object of  文本 style, the label is a string (in combination  labelStyle)
• inactiveLabelStyle Style object character string so as to cover the label  文本 style tags inactive (and  labelStyle combined)
• iconContainerStyle - for covering Viewan icon of style container style object.
• overlayColor - you can change the background color of the remaining portion of the drawer.
• drawerLockMode - Specifies drawer lock mode,'unlocked', 'locked-closed, 'locked-open'。




Fourth, pay attention to points

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