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

Question

我已经像本文档所述编写了类型定义，但是当我使用嵌套导航时出现了问题。

这里是示例代码：

在我的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”类型 | “个人”| '环境'

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。

之前的回答：

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

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