Question

说我有两个这样的导航器：

export type RootStackParamList = {
  Bootstrap: undefined;
  Login: undefined;
  MainApp: undefined;
};

export type MainTabsParamList = {
  Explore: undefined;
  Profile: undefined;
};

const MainTabs = createBottomTabNavigator<MainTabsParamList>();
const MainApp = () => (
  <MainTabs.Navigator >
    <MainTabs.Screen
      name="Explore"
      component={Explore}
    />
    <MainTabs.Screen
      name="Profile"
      component={Profile}
    />
  </MainTabs.Navigator>
);

const RootStack = createStackNavigator<RootStackParamList>();
const App = () => {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Bootstrap" headerMode="none">
        <RootStack.Screen name="Bootstrap" component={Bootstrap} />
        <RootStack.Screen name="Login" component={Login} />
        <RootStack.Screen name="MainApp" component={MainApp} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

现在，如果我想从Profile屏幕导航到Bootstrap屏幕。我必须写：（正确标注了导航道具）

navigation.navigate('MainApp', {screen: 'Profile'})

但是打字稿在这里给出了错误。说Type '{ screen: string; }' is not assignable to type 'undefined'。这是因为打字稿不知道MainApp有子屏幕。因此，我必须以某种方式编写ParamLists，以便打字稿知道子屏幕。我怎么做？ react-navigation v5支持吗？

Answer 1

好像没有开箱即用的解决方案，但找到了这个thread (issue)。在那里，我们可能会找到不错的solution。

type NestedNavigatorParams<ParamList> = {
  [K in keyof ParamList]: undefined extends ParamList[K]
    ? { screen: K; params?: ParamList[K] }
    : { screen: K; params: ParamList[K] }
}[keyof ParamList]

它非常易于使用：

export type MainTabsParamList = {
  Explore: undefined;
  Profile: undefined;
};

export type RootStackParamList = {
  Bootstrap: undefined;
  Login: undefined;
  MainApp: NestedNavigatorParams<MainTabsParamList>;
};

如何在v5中为嵌套导航器编写ParamList？

1 个答案: