React Native：如何从父抽屉导航器跳转到子堆栈导航器指定页面

你遇到的核心问题是StackNavigator的初始路由被硬编码为Home，导致通过抽屉项传入的initialParams无法生效。以下是两种可靠的解决方法：

方法一：使用useEffect+导航重置（推荐） #

通过监听参数变化，在组件挂载或参数更新时重置导航栈到目标页面，确保每次点击抽屉项都能直接跳转到指定路由，同时清空之前的栈历史：

import { useEffect } from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function PublicLayout({ route, navigation }) {
  useEffect(() => {
    // 获取目标路由，默认 fallback 到 Home
    const targetRoute = route.params?.route || 'Home';
    // 重置导航栈，只保留目标页面
    navigation.reset({
      index: 0,
      routes: [{ name: targetRoute }],
    });
  }, [route.params?.route, navigation]);

  return (
    <Stack.Navigator screenOptions={{ header: Header }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Vehicle" component={VehicleScreen} />
      <Stack.Screen name="Financing" component={FinancingScreen} />
      <Stack.Screen name="Contact" component={ContactScreen} />
    </Stack.Navigator>
  );
}

方法二：动态设置StackNavigator的initialRouteName #

直接将传入的参数作为StackNavigator的初始路由，这种方式更简洁，但需要确保参数能被正确获取：

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

const Stack = createNativeStackNavigator();

export default function PublicLayout({ route }) {
  // 动态获取初始路由，默认 fallback 到 Home
  const initialRoute = route.params?.route || 'Home';

  return (
    <Stack.Navigator initialRouteName={initialRoute} screenOptions={{ header: Header }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Vehicle" component={VehicleScreen} />
      <Stack.Screen name="Financing" component={FinancingScreen} />
      <Stack.Screen name="Contact" component={ContactScreen} />
    </Stack.Navigator>
  );
}

注意事项 #

• 方法一的navigation.reset会清空栈历史，适合需要每次点击抽屉项都回到"初始状态"的场景；
• 方法二依赖组件重新渲染来更新StackNavigator的初始路由，若导航器存在缓存机制，可能不如方法一可靠；
• 确保route.params.route的值与StackNavigator中定义的屏幕名称完全一致（比如'Contact'对应<Stack.Screen name="Contact" />）。

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