React Native嵌套导航问题：抽屉失效与内联函数警告修复

1. 解决抽屉导航未渲染的核心问题 #

你修改后的Draw组件没有返回任何内容——箭头函数使用大括号但未写return，导致HomeDrawer根本没被渲染，抽屉导航不存在自然会触发TOGGLE_DRAWER未被处理的错误。

修复：补全返回逻辑：

// 写法1：省略大括号自动返回
const Draw = () => <HomeDrawer initialRoute={initialRoute} handleSignOut={handleSignOut} />;

// 写法2：显式return
const Draw = () => {
  return <HomeDrawer initialRoute={initialRoute} handleSignOut={handleSignOut} />;
};

2. 正确传递props并消除内联函数警告 #

React Navigation禁止给component传内联函数，因为每次渲染都会创建新组件实例，导致状态丢失和性能损耗。正确做法是直接把HomeDrawer作为component，通过initialParams传递参数：

优化后的Stack.Screen写法 #

<Stack.Screen 
  name="Home"
  component={HomeDrawer}
  // 将需要传递的参数放入initialParams
  initialParams={{ initialRoute, handleSignOut }}
  options={({ route, navigation }) => ({
    headerTitle: getFocusedRouteNameFromRoute(route),
    headerLeft: () => (
      <Button
        title="Menu"
        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
      />
    ),
    headerRight: () => (
      <Button onPress={handleSignOut} title="Sign Out" />
    ),
  })}
/>

在HomeDrawer组件中接收参数 #

HomeDrawer会自动获取route和navigation props，从route.params中取出传递的值：

function HomeDrawer({ route, navigation }) {
  // 解构获取参数
  const { initialRoute, handleSignOut } = route.params;

  return (
    <Drawer.Navigator initialRouteName={initialRoute}>
      {/* 你的抽屉屏幕示例 */}
      <Drawer.Screen name="Dashboard" component={DashboardScreen} />
      <Drawer.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={{ headerRight: () => <Button onPress={handleSignOut} title="退出" /> }}
      />
    </Drawer.Navigator>
  );
}

3. 确保TOGGLE_DRAWER能被正确处理 #

如果修复后仍报错，检查两个关键点：

• 确认已导入DrawerActions：

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

• 确认HomeDrawer内部正确渲染了Drawer.Navigator，只要抽屉导航正常挂载，外层栈的navigation.dispatch就能穿透触发抽屉操作。

完整优化后的核心代码示例 #

import React from 'react';
import { Button } from 'react-native';
import { NavigationContainer, DrawerActions, getFocusedRouteNameFromRoute } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 自定义抽屉导航组件
function HomeDrawer({ route, navigation }) {
  const { initialRoute, handleSignOut } = route.params;

  return (
    <Drawer.Navigator initialRouteName={initialRoute}>
      <Drawer.Screen name="Dashboard" component={DashboardScreen} />
      <Drawer.Screen 
        name="Profile" 
        component={ProfileScreen}
        options={{ headerRight: () => <Button onPress={handleSignOut} title="退出" /> }}
      />
    </Drawer.Navigator>
  );
}

// 主组件
export default function App() {
  const [isAuthenticated, setIsAuthenticated] = React.useState(false);
  const [initialRoute, setInitialRoute] = React.useState("Dashboard");

  const handleSignOut = () => {
    // 实现退出逻辑
    setIsAuthenticated(false);
  };

  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Sign In">
        {isAuthenticated ? (
          <Stack.Screen 
            name="Home"
            component={HomeDrawer}
            initialParams={{ initialRoute, handleSignOut }}
            options={({ route, navigation }) => ({
              headerTitle: getFocusedRouteNameFromRoute(route),
              headerLeft: () => (
                <Button
                  title="Menu"
                  onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
                />
              ),
              headerRight: () => (
                <Button onPress={handleSignOut} title="退出" />
              ),
            })}
          />
        ) : (
          <Stack.Screen name="Sign In" component={SignInScreen} />
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

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