RN 抽屉导航DrawerNavigator

一、DrawerNavigator接口

DrawerNavigator（RouteConfigs,DrawerNavigatorConfig）

其中RouteConfigs部分和StackNavigator的完全一样。DrawerNavigatorConfig的各个参数如代码注释

const DrawerNavigatorDemo =DrawerNavigator(
  {
    Home: {screen: MyHomeScreen},
    Notifications: {screen: MyNotificationsScreen}
  },
  {
    /**
     * 抽屉式导航的 宽度
     */
    drawerWidth: totalWidth*0.8,
    /**
     * 抽屉式导航的 从哪个方向出来, rihgt, left
     */
    drawerPosition: 'left',
    /**
     * 自定义抽屉菜单的 内容
     */
    // contentComponent: props => {
    //     console.log(props);
    //     return (
    //         
    //             
    //                 
    //                 123
    //             
    //             
    //             
    //                 
    //                     {/* SafeAreaView
    //                        匹配iphonex  安全区域视图 */}
    //                     
    //                 
    //             
    //         
    //     )
    // },
    /**
     * 启用本地动画，测试好像没啥变化
     */
    useNativeAnimations: true,
    /**
     * 抽屉容器的背景颜色 默认为白色
     */
    drawerBackgroundColor: '#fff',
    /**
     * 路由默认
     */
    initialRouteName: 'Home',
    /**
     * 需要显示的路由，也可以进行排序
     */
    // order: []
    /**
     * 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为
     */
    backBehavior: null,
    /**
     * 内容选项
     */
    contentOptions: {
      /**
       * 活动标签的标签和图标颜色
       */
      activeTintColor: '#ff0000',
      /**
       * 活动标签的背景颜色
       */
      activeBackgroundColor: 'lightgray',
      /**
       * 非活动标签的标签和图标颜色
       */
      inactiveTintColor: '#000',
      /**
       * 非活动标签的背景颜色
       */
      inactiveBackgroundColor: '#fff',
      /**
       * 按下时触发
       */
      onItemPress(router) {
        console.log(router)
      },
      /**
       * 容器的样式 View
       */
      itemsContainerStyle: {
        //backgroundColor: 'yellow'
      },
      /**
       * 单个item容器样式 View
       */
      itemStyle: {
       //backgroundColor: 'yellow'
      },
      /**
       * label 字体样式
       */
      labelStyle: {
        color: '#000'
      },
      /**
       * icon 容器样式
       */
      iconContainerStyle: {
        backgroundColor: 'blue'
      }
    }
  }
);

二、抽屉导航页面

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor, focused }) =>
      
  };

  openDrawer = () => {
    // 打开抽屉式导航
    const { navigate } = this.props.navigation;
    navigate('DrawerOpen')
  };

  render() {
    return (
      
        {this.props.navigation.navigate('Notifications')}}
          title="Go to notifications"
        />
         this.openDrawer()} title="OpenDrawer" />
      
    )
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor, focused }) =>
      
  };

  render() {
    return (
      
        {this.props.navigation.navigate('Home')}}
                title="Go back home"
        />
      
    )
  }
}

三、 打开抽屉式导航

const { navigate } = this.props.navigation; navigate('DrawerOpen')

四、遇到的问题

期间遇到了这个bug，排查后发现为 [email protected]的bug

npm uninstall react-navigation && npm install [email protected] 可以解决，最终效果如图