嵌套抽屉导航中drawerContent的props.navigator类型扩展问题

嘿，这个问题我之前碰到过不少次，本质上就是TypeScript的类型推断没跟上我们的导航嵌套结构——外层是Stack导航，内层Drawer的navigator默认只被识别为抽屉导航助手类型，所以没法调用栈的push方法。不过通过类型合并就能轻松搞定，下面一步步来：

1. 定义合并后的导航助手类型 #

首先，我们需要把抽屉和栈的导航助手类型交叉合并，这样就能得到一个同时拥有两类方法的新类型：

import { DrawerNavigationHelpers, DrawerContentProps } from '@react-navigation/drawer';
import { StackNavigationHelpers } from '@react-navigation/stack';

// 交叉合并抽屉和栈的导航方法类型
type CombinedNavHelpers = DrawerNavigationHelpers & StackNavigationHelpers;

// 替换DrawerContentProps里的navigator类型
type CustomDrawerProps = Omit<DrawerContentProps, 'navigator'> & {
  navigator: CombinedNavHelpers;
};

2. 在自定义drawerContent中使用新类型 #

现在我们的自定义抽屉内容组件就能用这个新类型了，props.navigator 会同时拥有抽屉（比如closeDrawer）和栈（比如push）的导航方法：

const CustomDrawerContent = (props: CustomDrawerProps) => {
  const navigateToStackScreen = () => {
    // 现在可以正常调用push方法，同时也能调用抽屉的方法
    props.navigator.push('StackScreen');
    props.navigator.closeDrawer();
  };

  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
        label="跳转到StackScreen"
        onPress={navigateToStackScreen}
      />
    </DrawerContentScrollView>
  );
};

3. 把自定义抽屉组件传入Drawer.Navigator #

最后，只需要把这个自定义的drawerContent传给Drawer导航器就行：

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerContent {...props} />}
>
  <Drawer.Screen name="DrawerScreen1" component={DrawerScreen1} />
  <Drawer.Screen name="DrawerScreen2" component={DrawerScreen2} />
</Drawer.Navigator>

额外提示 #

如果你的Stack导航有自定义的路由参数，还可以给StackNavigationHelpers加上泛型参数，比如StackNavigationHelpers<YourStackParamList>，这样类型会更精确，避免出现参数不匹配的问题。

内容的提问来源于stack exchange，提问作者a-c-sreedhar-reddy