如何为React Navigation嵌套导航添加类型校验并解决跨栈跳转问题

核心问题原因 #

你遇到的异常分别来自类型定义错误、跨嵌套导航跳转写法不符合规范：

1. 跨嵌套导航跳转时，未挂载的子导航器内部路由不会全局注册，直接跳转子路由会找不到对应页面
2. CompositeNavigationProp的第二个参数需要传入父级导航器（也就是你的BottomTab导航）的类型，而非目标子栈的类型
3. 跳转时需要先指定父导航器中的子导航器路由名，再通过参数指定子导航器内的目标路由

正确实现步骤 #

1. 修正嵌套导航参数类型定义

首先用NavigatorScreenParams包裹嵌套导航的参数类型，这是React Navigation对嵌套导航类型的标准定义要求：

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

type BottomTabNavigatorParamsList = {
  homeStack: NavigatorScreenParams<HomeStackParamsList>;
  profileStack: NavigatorScreenParams<ProfileStackParamsList>;
};

2. 修正页面导航类型定义

CompositeNavigationProp的泛型第一个参数为当前页面所属导航器的类型，第二个参数为父级导航器的类型：

import type { CompositeNavigationProp } from '@react-navigation/native';
import type { BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import type { StackNavigationProp } from '@react-navigation/stack';

// Details页面的导航类型
type DetailsScreenNavigationProp = CompositeNavigationProp<
  // 当前页面所属的HomeStack导航类型
  StackNavigationProp<HomeStackParamsList, 'Details'>,
  // 父级BottomTab导航类型
  BottomTabNavigationProp<BottomTabNavigatorParamsList>
>;

// 调用useNavigation时传入类型
const navigation = useNavigation<DetailsScreenNavigationProp>();

3. 修正跳转写法

跨嵌套导航跳转时，需要先指定子导航器在父导航中的路由名，再通过screen参数指定子导航器内的目标页面：

navigation.navigate('profileStack', {
  screen: 'Settings'
});

该写法会自动挂载未渲染的ProfileStack，先压入Profile页面再压入Settings页面，返回时会正常回到Profile页面，也不会出现导航渲染异常的问题。

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