在react-navigation库中，如何为Stack.Navigator的initialRouteName传参？

当你需要为动态设置的initialRouteName对应的页面传递参数时，initialRouteName本身仅支持指定路由名称，无法直接携带参数。以下是两种可行的实现方式：

方案一：使用navigation.reset()初始化导航栈（推荐） #

这种方式通过重置导航栈，直接将目标页面设为栈的第一个页面并附带参数，是动态场景下最灵活的方案：

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

const Stack = createStackNavigator();

function YourNavigator() {
  const navigation = useNavigation();
  // 动态路由名
  const routeName = 'TargetScreen';
  // 要传递的初始参数
  const initialParams = { itemId: 456, userName: 'Alice' };

  useEffect(() => {
    // 重置导航栈，设置初始路由及参数
    navigation.reset({
      index: 0,
      routes: [
        { name: routeName, params: initialParams }
      ],
    });
  }, [navigation, routeName, initialParams]);

  return (
    <Stack.Navigator
      screenOptions={{ animation: 'slide_from_right' }}>
      {/* 注册目标页面 */}
      <Stack.Screen name="TargetScreen" component={TargetScreen} />
      {/* 注册其他需要的页面 */}
      <Stack.Screen name="OtherScreen" component={OtherScreen} />
    </Stack.Navigator>
  );
}

在目标页面TargetScreen中，可通过route.params获取参数：

function TargetScreen({ route }) {
  // 解构参数，添加默认值避免未定义报错
  const { itemId = 0, userName = 'Guest' } = route.params || {};

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Text>User: {userName}</Text>
    </View>
  );
}

方案二：结合initialRouteName与initialParams（静态/有限动态场景） #

如果你的动态路由名仅在有限几个页面中切换，可以在注册页面时根据当前routeName动态设置initialParams：

function YourNavigator() {
  const routeName = 'TargetScreen';
  const initialParams = { itemId: 456 };

  return (
    <Stack.Navigator
      initialRouteName={routeName}
      screenOptions={{ animation: 'slide_from_right' }}>
      <Stack.Screen 
        name="TargetScreen" 
        component={TargetScreen}
        // 仅当当前初始路由为该页面时传递参数
        initialParams={routeName === 'TargetScreen' ? initialParams : {}}
      />
      <Stack.Screen name="OtherScreen" component={OtherScreen} />
    </Stack.Navigator>
  );
}

注意事项 #

• initialRouteName仅接受路由名称字符串，无法直接传递参数。
• 建议始终为参数添加默认值，避免因参数未定义导致的报错。

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