0

我一直在查看有关类型检查导航屏幕道具的文档，但似乎无法弄清楚如何在给定嵌套导航结构的情况下编写我的 types.ts 文件（如下所示）。任何帮助将非常感激。

导航结构：

  • 根堆栈
    • 登录屏幕
    • 未找到屏幕
    • 主堆栈
      • 库选项卡
        • 我的节目
        • 朋友详情
        • 显示详细资料
      • 探索标签
        • 搜索
        • 朋友详情
        • 显示详细资料
      • 朋友标签
        • 朋友们
        • 朋友详情
        • 显示详细资料

我的导航文件：

export default function Navigation() {
  return (
    <NavigationContainer> 
      <RootNavigator />
    </NavigationContainer>
  );
}

const RootStack = createNativeStackNavigator();

function RootNavigator() {
  return (
    <RootStack.Navigator>
      <Stack.Screen name="Login" component={Login} /> 
      <RootStack.Screen
        name="Main"
        component={BottomTabNavigator}     
      />
      <Stack.Screen name="NotFound" component={NotFound} />
    </RootStack.Navigator>
  );
}

const BottomTab = createBottomTabNavigator();

function BottomTabNavigator() {
  return (
    <BottomTab.Navigator>
      <BottomTab.Screen
        name="LibraryTab"
        component={LibraryStackScreen}       
      />
      <BottomTab.Screen
        name="ExploreTab"
        component={ExploreStackScreen}       
      />
      <BottomTab.Screen
        name="FriendsTab"
        component={FriendsStackScreen}       
      />
    </BottomTab.Navigator>
  );
}

const LibraryStack = createNativeStackNavigator();

function LibraryStackScreen() {
  return (
    <LibraryStack.Navigator>
      <LibraryStack.Screen name="My Shows" component={MyShows} />
      <LibraryStack.Screen name="Friend Details" component={FriendDetails} />
      <LibraryStack.Screen name="Show Details" component={ShowDetails} />
    </LibraryStack.Navigator>
  );
}

const ExploreStack = createNativeStackNavigator();

function ExploreStackScreen() {
  return (
    <ExploreStack.Navigator>
      <ExploreStack.Screen name="Search" component={Search} />
      <ExploreStack.Screen name="Friend Details" component={FriendDetails} />
      <ExploreStack.Screen name="Show Details" component={ShowDetails} />
    </ExploreStack.Navigator>
  );
}

const FriendsStack = createNativeStackNavigator();

function FriendsStackScreen() {
  return (
    <FriendsStack.Navigator>
      <FriendsStack.Screen name="Friends" component={Friends} />
      <FriendsStack.Screen name="Friend Details" component={FriendDetails} />
      <FriendsStack.Screen name="Show Details" component={ShowDetails} />
    </FriendsStack.Navigator>
  );
}

为简单起见，假设如果一个组件没有在上面显示，它看起来像这样：

import { LibraryTabScreenProps } from "../navigation/types";

const MyShows = ({ navigation }: LibraryTabScreenProps<"MyShows">["navigation"]) => {
  //returns some JSX and makes use of navigation prop
};

export default MyShows;

我当前的 types.ts 文件（我需要帮助）：

import type { BottomTabScreenProps } from "@react-navigation/bottom-tabs";
import type { CompositeScreenProps, NavigatorScreenParams } from "@react-navigation/native";
import { NativeStackScreenProps } from "@react-navigation/native-stack";

declare global {
  namespace ReactNavigation {
    interface RootParamList extends RootStackParamList {}
  }
}

export type RootStackParamList = {
  Main: NavigatorScreenParams<MainStackParamList>;
  Login: undefined;
  NotFound: undefined;
};

export type MainStackParamList = {
  LibraryTab: NavigatorScreenParams<LibraryTabParamList>;
  ExploreTab: NavigatorScreenParams<ExploreTabParamList>;
  FriendsTab: NavigatorScreenParams<FriendsTabParamList>;
};

export type RootStackScreenProps<T extends keyof RootStackParamList> =
  NativeStackScreenProps<RootStackParamList, T>;

export type MainStackScreenProps<T extends keyof MainStackParamList> =
  CompositeScreenProps<
    NativeStackScreenProps<MainStackParamList, T>,
    RootStackScreenProps<keyof RootStackParamList>
  >;

export type LibraryTabScreenProps<T extends keyof LibraryTabParamList> =
  CompositeScreenProps<
    BottomTabScreenProps<LibraryTabParamList, T>,
    CompositeScreenProps<
      MainStackScreenProps<keyof MainStackParamList>,
      RootStackScreenProps<keyof RootStackParamList>
    >
  >;

//same logic would apply to ExploreTabScreenProps and FriendsTabScreenProps

export type LibraryTabParamList = {
  MyShows: undefined;
  FriendDetails: undefined;
  ShowDetails: undefined;
};
export type ExploreTabParamList = {
  Search: undefined;
  FriendDetails: undefined;
  ShowDetails: undefined;
};
export type FriendsTabParamList = {
  Friends: undefined;
  FriendDetails: undefined;
  ShowDetails: undefined;
};
4

0 回答 0