React Native登录跳转后抽屉默认打开，如何设置默认关闭？

嘿，我之前也碰到过这个烦人的小问题！咱们一步步来把它搞定：

最直接的解决方案：跳转至抽屉内的具体屏幕而非抽屉容器 #

你现在是直接跳转到Home（整个抽屉导航器的容器），试试改成跳转到抽屉里的第一个页面HomePage：

// 登录成功后替换原有跳转代码
this.props.navigation.navigate("HomePage");

当直接进入抽屉导航器的容器时，部分场景下React Navigation会默认触发抽屉展开；而直接进入抽屉内的具体页面，抽屉会保持默认关闭状态，这是最简单高效的解决方式。

方法二：在页面中监听焦点并自动关闭抽屉 #

如果因为业务需求必须跳转到Home容器，那可以在抽屉的首屏（比如HomePage）里添加焦点监听，每次页面聚焦时自动关闭抽屉：

类组件版本 #

import React, { Component } from 'react';

class HomePage extends Component {
  componentDidMount() {
    // 首次加载时关闭抽屉
    this.props.navigation.closeDrawer();
  }

  componentDidUpdate(prevProps) {
    // 页面重新聚焦时（比如从其他页面返回）也关闭抽屉
    if (this.props.navigation.isFocused() && !prevProps.navigation.isFocused()) {
      this.props.navigation.closeDrawer();
    }
  }

  // ... 组件其他代码
}

函数组件版本（Hooks写法） #

import React, { useEffect } from 'react';
import { useNavigation } from '@react-navigation/native';

const HomePage = () => {
  const navigation = useNavigation();

  useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      navigation.closeDrawer();
    });

    // 组件卸载时移除监听
    return unsubscribe;
  }, [navigation]);

  // ... 组件其他代码
};

方法三：检查自定义Drawer组件的默认状态 #

你的抽屉导航器用了自定义的contentComponent: props => <Drawer { ...props } />，可以检查下这个自定义Drawer组件的内部状态，是不是默认把抽屉设为打开状态了？比如如果组件里有state = { isOpen: true }这类代码，改成false就能解决问题。

额外提示：核对抽屉导航器配置 #

确认你的createDrawerNavigator配置里没有意外开启抽屉的设置，比如有没有错误配置drawerPosition或其他相关属性——不过通常默认配置下抽屉是关闭的，这个可能性比较小。

内容的提问来源于stack exchange，提问作者Abhi Singh