如何在 react-navigation v5 中使用嵌套导航时编写类型定义

Question

我写过 this document 所说的类型定义，但是当我使用嵌套导航时出现问题。

示例代码来了：

在我的 App.tsx

export type MainStackParamList = {
  Setting: undefined
}
export type TabParamList = {
  Home: undefined
  Personal: undefined
}
const MainStack = createNativeStackNavigator<MainStackParamList>()
const Tab = createBottomTabNavigator<TabParamList>()
const RootStack = createNativeStackNavigator()

const MainStackScreen = () => (
  <MainStack.Navigator screenOptions={{ headerShown: false }}>
    <MainStack.Screen name="Setting" component={Setting} />
  </MainStack.Navigator>
)

const TabScreen = () => (
  <Tab.Navigator screenOptions={{ headerShown: false }}>
    <Tab.Screen name="Home" component={Setting} />
    <Tab.Screen name="Personal" component={Setting} />
  </Tab.Navigator>
)

const RootStackScreen = () => (
  <RootStack.Navigator screenOptions={{ headerShown: false }}>
    <RootStack.Screen name="Tab" component={TabScreen} />
    <RootStack.Screen name="Main" component={MainScreen} />
  </RootStack.Navigator>
)

在Home.tsx

type HomeRouteProp = RouteProp<TabParamList, 'Home'>
type HomeNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Home'>,
  NativeStackNavigationProp<MainStackParamList>
>
type Props = {
  route: HomeRouteProp
  navigation: HomeNavigationProp
}

 // ...

 navigation.navigate('Main', { screen: 'Setting' })

打字稿说不能将 'Main' 分配给类型 'Home' | 'Personal' | 'Setting'

Answer 1

您还需要为根堆栈添加类型。

type RootStackParamList = {
  Tab: undefined;
  Main: undefined;
}

然后是你的导航道具：

// Navigation prop for your MainStack
type MainNavigationProp = CompositeNavigationProp<
  NativeStackNavigationProp<MainStackParamList, 'Setting'>,
  NativeStackNavigationProp<RootStackParamList>
>

// Navigation prop for your Home
type HomeNavigationProp = CompositeNavigationProp<
  BottomTabNavigationProp<TabParamList, 'Home'>,
  MainNavigationProp
>

使用 CompositeNavigationProp 组合导航道具取决于嵌套。在这里，您的 Home 屏幕嵌套在 MainStack 中，因此它的导航道具需要与 MainStack 的导航道具结合使用。

---

上一个回答：

在您的 Stack 中，您有 Setting，在您的选项卡中，您有 Home 和 Personal。任何地方都没有 Main 的定义，所以错误是正确的。

看起来你的 Main 就是你的 MainStack，我猜你是在选项卡内渲染的？然后需要在TabParamList

中加入Main: undefined

Answer 2

要改进已接受答案中的评论，RootStackParamList 应输入为

type RootStackParamList = {
  Tab: NavigatorScreenParams<TabParamList>;
  Main: NavigatorScreenParams<MainStackParamList>;
}