在嵌套屏幕和导航器之间导航

Question

我还没有找到这个问题的好方法/答案，并认为这将是一个很好的起点。我在 React Native 中使用 React 的导航。本质上，我有很多屏幕……这些屏幕在普通屏幕和/或嵌套导航器内有所不同。但我开始注意到我的应用程序中出现了意大利面条般的嵌套屏幕。

例如：让我们使用常见的“ViewProfileScreen”屏幕。这是在多个导航器中添加的：HomeNavigator（从主屏幕上的帖子缩略图进行导航）、ExploreNavigator（从搜索屏幕上的下拉菜单进行导航）和 MyProfileScreen。

目前 HomeNavigator 和 ExploreNavigator 的每个导航器中都有“ViewProfileScreen”。但是，当我单击 MyProfileScreen 上的帖子中的评论缩略图时，我从 MyProfileScreen 导航到另一个导航器中的“ViewProfileScreen”（因为我没有明确将屏幕添加到 MyProfileScreen 导航器）。当我用手势向后滑动（而不是单击 goBack()）时，它会将我带到新导航器中的父屏幕。它不会带我回到我之前导航的 MyProfileScreen。我知道这是预期的设计，但当用户只想返回时会变得令人沮丧。

将每个屏幕都放在一个 AppNavigator 文件中感觉没有组织（因为我有很多屏幕）。对于具有超过 40 个不同屏幕的大型生产规模应用程序，最好的方法是什么。我要开始研究深层链接吗？终极版？我是否可以阻止向后滑动手势并为“goBack()”实现我自己的手势逻辑？我愿意接受各种想法！

我希望回到原来的屏幕而不是去家长那里。

Answer 1

理想情况下，每个不同的流最终都是一个单独的堆栈导航器。

如果您有一个可以从许多其他嵌套堆栈访问的屏幕，最好将其作为模式屏幕放置在根导航器中，这样每个不同的堆栈导航器都可以导航到它。

<RootNavigator>
    <Stack.Screen name='Home' component={HomeStack} />
    <Stack.Screen name='Explore' component={ExploreStack} />
    <Stack.Screen name='Profile' component={ProfileStack} />
    // RootNavigator Modals
    <Stack.Screen name='ViewProfile' component={ViewProfile} />
</RootNavigator>

拥有这种类型的结构将允许您从每个不同堆栈“主页”、“浏览”或“个人资料”内的每个嵌套屏幕导航到“查看个人资料”。从 ViewProfile 返回将使您从导航到 ViewProfile 屏幕的屏幕返回（这是所需的行为）。

假设我们在 Home -> PostDetail -> Comments -> ViewProfile - 返回应该会让您回到 Comments 屏幕。

同样适用于 Profile -> AnotherScreen -> ViewProfile -> 返回应导航至 AnotherScreen。

如果您有更复杂的场景，您可以尝试使用

navigation.reset

和

navigation.replace

https://reactnavigation.org/docs/navigation-prop

回答您的一些问题：

• 我是否开始研究深层链接？ - 不，没有必要这样做。
• Redux？不，理想情况下你不希望 redux 知道除了状态管理之外的任何东西。
• 我是否阻止向后滑动手势并为“goBack()”实现我的手势逻辑 - 永远不要阻止向后滑动手势，iOS 用户在发生这种情况时会非常生气，哈哈。