reactjs React原生：如何正确键入嵌套导航器？

gev0vcfq 于 2022-12-26 发布在 React

关注(0)|答案(1)|浏览(118)

bounty将在8小时后过期。回答此问题可获得+50的声誉奖励。Shamoon正在寻找来自声誉良好来源的答案。
情况：

你可能已经知道了，我目前正在开发一个AudioBook播放器（多么有创意啊）。这是我第一个同时针对react-native和typescript的更大项目，在正确输入导航方面我有点困难。下面是一个快速概览：

疑问/问题：

1.我感觉我使用了太多的嵌套导航器，但是因为我没有任何经验，所以很难判断。你怎么看？如果我使用了太多的嵌套导航器，我应该如何重组？（docu提到了组，但是我不知道如何在这里实现）
1.我如何正确地输入我的组件？到目前为止，我是这样做的（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>
  >
>;

你能帮我把这些片段拼在一起吗？我看了很多视频，读了很多遍文档，但是感觉我只是在复制，而没有真正理解，而且总是以错误结束。
1.我的最后一个问题有点高层次：我应该把这些不同的prop文件放在哪里？在使用它们的组件中创建它们是更好的做法，还是应该构建一个集中的文件，其中只包含与导航相关的所有类型/接口？
无论如何，谢谢你阅读这篇超长的文章。我想如果我能给出我正在努力解决的问题的实际例子，可能会有所帮助，所以我希望它能做到：）

reactjs

来源：https://stackoverflow.com/questions/69930158/react-native-how-do-i-type-nested-navigators-properly

1条答案

按热度按时间

lmyy7pcs1#

new structure
你应该只在需要的屏幕上使用底部导航。在其他地方，把堆栈放到全局堆栈中。它将隐藏底部导航，并给予你从应用程序的任何地方访问屏幕（当然，如果你需要的话）。

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 <></>
}

赞(0）回复(0）举报 2022-12-26

我来回答

reactjs React原生：如何正确键入嵌套导航器？

1条答案

相关问题

热门标签

最新问答