React Native：如何正确输入嵌套导航器？

Question

情况：

正如您可能知道的那样，我目前正在构建一个有声读物播放器（多么有创意）。这是我第一个针对反应原生和打字稿的更大项目，在正确输入导航方面我有点挣扎。首先：这是一个快速概述：

疑问/问题：

1. 感觉我使用了太多嵌套导航器，但由于我没有任何经验，所以很难判断。你怎么认为？如果我使用太多，我应该如何重组？（文档提到了组，但我不知道如何在这里实现）
2. 如何正确键入我的组件？到目前为止我的做法如下（LibraryStack 自下而上的视角）：

// 1. I created a type for the Screen routes (including the passed down props)
type LibraryRoutes = {
  Library: undefined;
  BookDetails: { album: Album };
  BookSettings: { album: Album };
};

// 2. A type for the different Routes (using NavigatorScreenParams, but I'm not sure I use them correctly)
// This then goes up the same way up to the root
type TabRoutes = {
  HomeStack: NavigatorScreenParams<HomeRoutes>;
  LibraryStack: NavigatorScreenParams<LibraryRoutes>;
  ...etc.
};

// 3. Then I created interfaces for the props
interface TabNavProps<RouteName extends keyof TabRoutes> {
  navigation: BottomTabNavigationProp<TabRoutes, RouteName>;
  route: RouteProp<TabRoutes, RouteName>;
}

这就是我的挣扎真正开始的地方，因为当我尝试在不同堆栈之间导航时，我不断遇到错误。我试图通过实现 CompositeScreenProps 来解决这个问题，但我仍然总是遇到类型错误和导航死胡同。

// Example for a CompositeScreenProp:
type LibraryProps = CompositeScreenProps<
  StackScreenProps<LibraryRoutes, "BookSettings">,
  CompositeScreenProps<
    StackScreenProps<AudioRoutes, "AudioPlayer">,
    BottomTabScreenProps<TabRoutes>
  >
>;

你能帮我把这些部件组装在一起吗？我多次观看视频和阅读文档，但感觉就像我只是复制而没有真正理解，并且总是以错误结束。

3. 我的最后一个问题有点高层次：我实际上应该把这些不同的 prop 文件放在哪里？在使用它的组件中创建它们是更好的做法，还是应该构建一个仅包含与导航相关的所有类型/接口的集中文件？

不管怎样，感谢您阅读这篇超长的文字。我认为如果我展示我正在努力解决的实际例子可能会有所帮助，所以我希望它能做到:)

Answer 1

新结构

您应该仅在屏幕上需要的地方使用底部导航。在其他情况下，将堆栈放入全局堆栈中。它将隐藏底部导航，并让您可以从应用程序中的任何位置访问屏幕（当然如果您需要）。

import React from 'react';

import {BottomTabScreenProps} from '@react-navigation/bottom-tabs'
import {CompositeScreenProps} from '@react-navigation/native'
import {StackScreenProps} from '@react-navigation/stack';



type IAuthStack = {
  SignIn: undefined;
  SignUp: undefined;
  ForgetPassword: undefined;
}

type IRootStack = {
  MainBottomTabs: IMainBottomTabs;
  BookDetailScreen: {
    //or you can put your book information
    bookId: string;
  };
  BookSettingsScreen: {
    //or you can put your book information
    bookId: string;
  };
  ProfileSettginsScreen: {
    //or you can put your profile information
    profileId: string;
  };
}

type IMainBottomTabs = {
  Home: undefined;
  Library: undefined;
  Search: undefined;
  Profile: undefined;
}

//Local access to stack
type HomeScreenProps = BottomTabScreenProps<IMainBottomTabs, 'Home'>;
//Access with parent stack
type ProfileScreenProps = CompositeScreenProps<BottomTabScreenProps<IMainBottomTabs, 'Profile'>, StackScreenProps<IRootStack>>;

const HomeScreen:React.FC<HomeScreenProps> = ({navigation}) => {
  const handlePressNavigate = () => navigation.navigate('Library')
  return <></>
}

const ProfileScreen:React.FC<ProfileScreenProps> = ({navigation}) => {
  const handlePressNavigate = () => navigation.navigate('ProfileSettginsScreen')
  return <></>
}