React Native iOS端登录时抽屉部分展开问题求助

问题情况 #

• 登录进入应用时，抽屉会部分展开，无法完全关闭
• 杀死应用重新打开后，抽屉能正常完全关闭
• 使用drawerType: 'front'触发该问题，改为'back'可解决但不符合设计需求
• @react-navigation/drawer 版本6.5.4及最新版本均存在此问题

相关代码片段：

<Drawer.Navigator 
  initialRouteName='HomeDrawerItem' 
  screenOptions={{ 
    headerShown: false, 
    drawerPosition: 'right', 
    drawerStyle: {width:"88%"}, 
    drawerType: 'front' 
  }}
>
  {/* 子路由组件 */}
</Drawer.Navigator>

可能原因 #

drawerType: 'front'的默认动画逻辑，在登录态切换（从登录页跳转至抽屉所在主页）时，没有正确完成状态重置，导致抽屉停留在动画中途的部分展开状态；而应用重启后状态完全初始化，所以抽屉能正常关闭。

解决方案 #

方案1：登录跳转后强制关闭抽屉 #

在登录成功的跳转逻辑里，手动触发抽屉关闭动作：

1. 先获取导航容器的引用：

import { useNavigationContainerRef } from '@react-navigation/native';
import { DrawerActions } from '@react-navigation/drawer';

// 在根组件中定义引用
const drawerRef = useNavigationContainerRef();

2. 登录成功后执行关闭+跳转：

// 登录接口成功回调里
drawerRef.current?.dispatch(DrawerActions.closeDrawer());
navigation.navigate('HomeDrawerItem');

方案2：主页加载时强制关闭抽屉 #

在抽屉的初始页面（HomeDrawerItem）中，利用useEffect在页面加载时强制关闭抽屉：

import { useNavigation } from '@react-navigation/native';
import { DrawerActions } from '@react-navigation/drawer';

function HomeDrawerItem() {
  const navigation = useNavigation();

  useEffect(() => {
    navigation.dispatch(DrawerActions.closeDrawer());
  }, []);

  // 页面内容
  return <View>{/* ... */}</View>;
}

方案3：强制设置初始抽屉状态 #

尝试在screenOptions里直接指定初始抽屉状态为关闭：

<Drawer.Navigator 
  initialRouteName='HomeDrawerItem' 
  screenOptions={{ 
    headerShown: false, 
    drawerPosition: 'right', 
    drawerStyle: {width:"88%"}, 
    drawerType: 'front',
    drawerStatus: 'closed' // 强制初始状态为关闭
  }}
>
  {/* 子路由组件 */}
</Drawer.Navigator>

方案4：自定义抽屉组件替代 #

如果上述方法都无效，可以改用原生的Drawer组件自定义实现，避免react-navigation内置的front类型动画bug：

import { Drawer } from 'react-native-drawer-layout';

function CustomDrawerNavigator() {
  return (
    <Drawer
      drawerPosition="right"
      drawerWidth="88%"
      renderDrawerContent={() => <YourDrawerContent />}
      // 自定义关闭状态的样式，避免动画异常
      drawerStyle={{ transform: [{ translateX: '100%' }] }}
    >
      {/* 主页内容 */}
      <HomeDrawerItem />
    </Drawer>
  );
}

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