情况:
正如您可能知道的那样,我目前正在构建一个有声读物播放器(多么有创意)。这是我第一个针对反应原生和打字稿的更大项目,在正确输入导航方面我有点挣扎。首先:这是一个快速概述:
疑问/问题:
- 感觉我使用了太多嵌套导航器,但由于我没有任何经验,所以很难判断。你怎么认为?如果我使用太多,我应该如何重组? (这docu https://reactnavigation.org/docs/group/提到了团体,但我不知道如何在这里实现)
- 如何正确键入我的组件?到目前为止我的做法如下(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>
>
>;
你能帮我把这些部件组装在一起吗?我多次观看视频和阅读文档,但感觉就像我只是复制而没有真正理解,并且总是以错误结束。
- 我的最后一个问题是一个更高层次的问题:我实际上应该将这些不同的 prop 文件放在哪里?在使用它的组件中创建它们是更好的做法,还是应该构建一个仅包含与导航相关的所有类型/接口的集中文件?
不管怎样,感谢您阅读这篇超长的文字。我认为如果我展示我正在努力解决的实际例子可能会有所帮助,所以我希望它能做到:)