react-navigation 6 跨Tab跳转嵌套栈导航器首次渲染传参异常问题

问题根因 #

该问题由React Navigation嵌套导航的参数传递机制导致：你调用navigation.navigate跳转到Tab下的Stack导航器时，传递的screen和params参数首先会被挂载到FindGasNavigator组件的route属性上，但内部的Stack.Navigator默认不会自动将这些参数同步给首次渲染的初始屏幕。只有当Stack导航器完成首次渲染后，后续的跳转动作才会触发正常的参数传递流程，因此会出现首次拿不到参数、后续跳转正常的现象。

解决方案 #

你只需要修改FindGasNavigator的代码，手动将外层接收到的参数透传给内部Stack的对应屏幕即可，修改后的代码如下：

export function FindGasNavigator({ route }: StackScreenProps<AppTabsParamList, typeof Nav.App.Tabs.FindGas.$name>) {
  const theme = useThemeProperties();
  return (
    <FindGasStack.Navigator>
      <FindGasStack.Screen
        name={Nav.App.Tabs.FindGas.StationList}
        component={StationListScreen}
        // 透传外层导航传递的参数作为屏幕初始参数
        initialParams={route.params?.params}
      />
    </FindGasStack.Navigator>
  );
}

如果你的Stack导航器支持跳转到多个不同的内部屏幕，可以额外添加initialRouteName配置适配多场景：

<FindGasStack.Navigator
  // 优先使用外层传递的screen作为初始路由，无传值时使用默认路由
  initialRouteName={route.params?.screen ?? Nav.App.Tabs.FindGas.StationList}
>

注意事项 #

• 若StationListScreen配置了参数默认值，需要确认参数合并逻辑符合预期，避免默认值覆盖传递过来的业务参数。
• 请同步更新AppTabsParamList的类型定义，确保FindGas项的参数类型包含screen和params两个可选字段，避免TypeScript类型报错。

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