React Native使用Stack Navigator后DrawerLayoutAndroid异常问题

你碰到的这个情况是DrawerLayoutAndroid在页面跳转返回后，通过ref调用openDrawer()只会触发遮罩变暗，但抽屉无法弹出，不过滑动手势正常。这说明抽屉的视图本身是正常渲染的，问题出在ref调用的方法没有正确触发抽屉的滑动动画逻辑。

可能原因 #

• 页面从导航栈返回后，DrawerLayoutAndroid的Native层状态没有正确恢复，导致openDrawer()仅激活了遮罩层，未执行抽屉的滑动逻辑。
• 组件重新挂载后，useRef绑定的实例虽然存在，但内部Native组件的上下文已经异常。

解决办法 #

1. 监听页面聚焦，强制组件重初始化 #

用React Navigation的useFocusEffect钩子，在页面回到前台时触发组件重渲染，确保DrawerLayoutAndroid的状态正确初始化：

import { useFocusEffect } from '@react-navigation/native';
import { useCallback, useState } from 'react';

const Main = ({navigation}) => {
  const drawer = useRef(null);
  const [renderKey, setRenderKey] = useState(0);

  useFocusEffect(
    useCallback(() => {
      // 页面聚焦时更新key，触发组件重挂载
      setRenderKey(prev => prev + 1);
    }, [])
  );

  return(
    <DrawerLayoutAndroid
      key={renderKey}
      ref={drawer}
      drawerWidth={300}
      drawerPosition={'left'}
      renderNavigationView={() => <MainDrawer />}
    >
      <TouchableOpacity onPress={() => drawer.current?.openDrawer()} />
    </DrawerLayoutAndroid>
  );
}

2. 延迟调用openDrawer() #

通过短暂延迟让Native层有足够时间恢复状态，避免调用时机过早：

<TouchableOpacity 
  onPress={() => {
    setTimeout(() => drawer.current?.openDrawer(), 50);
  }} 
/>

3. 改用React Navigation官方抽屉导航 #

如果自定义抽屉的需求不复杂，推荐直接使用@react-navigation/drawer，它和Stack Navigator的兼容性更好，能避免这类Native层的状态异常：

// 先安装依赖：npm install @react-navigation/drawer react-native-gesture-handler react-native-reanimated
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';

const Drawer = createDrawerNavigator();

function AppNavigator() {
  return (
    <NavigationContainer>
      <Drawer.Navigator drawerPosition="left" drawerWidth={300}>
        <Drawer.Screen name="Main" component={MainScreen} />
        {/* 其他页面路由 */}
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

4. 升级React Native版本 #

你当前使用的RN 0.68.2可能存在DrawerLayoutAndroid的已知bug，尝试升级到0.70+的稳定版本，大概率能修复该问题。

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