如何在expo-router的Tabs组件中程序化切换Tabs.Screen？

我基于Expo Router实现了Tabs标签页结构，想要通过代码触发标签页切换。查阅官方文档后尝试使用useNavigation()钩子，但发现该钩子没有jumpTo()方法，仅提供navigate()。

当我在对应index路由的HomeScreen组件中调用navigation.navigate('explore')时，TypeScript编译器报错提示navigate()不接受字符串类型参数，但官方文档明确说明该方法支持传入字符串路由名。

错误截图：

相关代码片段：

HomeScreen组件 #

export default function HomeScreen() {
  const navigation = useNavigation();
  ...
  const navigateToExplore = () => {
    navigation.navigate('explore');
  }
  ....
  return (
    ...
  );
}

TabLayout组件 #

import { Tabs } from 'expo-router';
...
export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs 
      ...
    >
      <Tabs.Screen
        name="index"
        ...
      />
      <Tabs.Screen
        name="explore"
        ...
      />
    </Tabs>
  );
}

在Expo Router的Tabs场景下，程序化切换标签页可以通过以下两种方式解决类型错误问题：

方式1：使用useRouter()（推荐） #

Expo Router内置的useRouter()钩子更适配路由跳转场景，直接传入路由路径即可完成切换，无需处理类型适配：

import { useRouter } from 'expo-router';

export default function HomeScreen() {
  const router = useRouter();
  
  const navigateToExplore = () => {
    router.push('/explore');
  };

  return (
    // 组件内容
  );
}

方式2：为useNavigation()指定Tabs导航类型 #

如果偏好使用useNavigation()，需要明确指定其类型为TabsNavigationProp，并定义你的标签页参数列表，让TypeScript识别合法的路由名称：

import { useNavigation } from '@react-navigation/native';
import type { TabsNavigationProp } from '@react-navigation/bottom-tabs';

// 定义标签页路由参数列表，无参数则设为undefined
type RootTabParamList = {
  index: undefined;
  explore: undefined;
};

export default function HomeScreen() {
  const navigation = useNavigation<TabsNavigationProp<RootTabParamList>>();
  
  const navigateToExplore = () => {
    // 两种调用方式都支持
    navigation.navigate('explore');
    // navigation.jumpTo('explore');
  };

  return (
    // 组件内容
  );
}

错误原因说明 #

useNavigation()默认返回通用导航类型，未关联你的Tabs路由配置，因此TypeScript无法校验你传入的字符串路由名的合法性。通过指定具体的Tabs导航类型或改用useRouter()，即可解决类型检查报错问题。

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