goBack() 使用 React Navigation 到上一个/不同的堆栈答案

【问题标题】：goBack() to previous/different stack using React NavigationgoBack() 使用 React Navigation 到上一个/不同的堆栈
【发布时间】：2018-01-10 20:30:58
【问题描述】：

我正在努力解决我希望是一个简单的问题。我有多个 StackNavigator，每个都有不同的屏幕，除了 .navigate 之外，我还使用 Drawer 在主堆栈之间移动。像这样：

主堆栈
- 主屏幕（条目）
- 会员资料
收件箱堆栈
- 收件箱屏幕
- 消息详细信息屏幕

在消息详细信息屏幕上，用户可以导航到个人资料。所以消息详细信息>配置文件。这很好用，就像在整个应用程序中一样。同一堆栈中的导航向前和向后都非常有用。我正在使用标准的 .navigate 继续前进。

this.props.navigation.navigate('MemberProfilePage')

但是，如果我点击后退按钮 - 或设置自定义后退按钮 - 用户将一直返回到主屏幕。如果我点击抽屉中的收件箱，屏幕仍将显示在消息详细信息上。

但我真的只想去：Message Details > Profile ... Profile goBack() to Message Details。

我已经尝试过默认的 goBack()，我尝试过像这样发送一个后退操作：

const backAction = NavigationActions.back({
  key: 'ProfileScreen'
})

或

const backAction = NavigationActions.back({
  key: null
})

感谢您的任何指导。

编辑：关于在 Drawer 中设置 backButton 的初步建议似乎有效。但这并不能解决问题。

我不想回到当前堆栈的初始屏幕。我想返回到我导航的屏幕，该屏幕位于不同的堆栈中。

【问题讨论】：

您的应用的层次结构可能有问题。也许最好有 1 个堆栈而不是 2 个，然后从您需要的任何屏幕导航到您需要的任何屏幕，并通过“后退”按钮获得您需要的任何屏幕。
顺便说一下，这种行为是 React-Navigation 方面的错误。他们从......四月......（或类似的东西）开始一直在努力。

标签： react-native react-navigation

【解决方案1】：

在两个导航器上遇到同样的问题，返回时总是会在一个导航器上正确，而在另一个导航器上出错，因为它会弹出到当前 StackNavigator 的根目录。

对我来说，解决方案是在两个stackNavigators 中引用相同的屏幕，当您从两个不同的导航器导航到它时，将显示相同的屏幕，但它将从不同的导航器加载，并且一切正常美好的。希望这可以帮助。

【讨论】：

【解决方案2】：

在您的 DrawerNavigatorConfig 中更改此道具

backBehavior='none' //default is initialRoute

backBehavior - 后退按钮是否会导致切换到初始状态路线？如果是，则设置为 initialRoute，否则设置为 none。默认为 initialRoute 行为。

https://reactnavigation.org/docs/navigators/drawer#DrawerNavigatorConfig

检查它是否工作......

【讨论】：

那个道具使用了默认的initialRoute，你是对的。但是将其更改为“无”没有任何影响。同样的经历正在发生。
我的应用程序中有另一个地方我尝试返回到之前的屏幕，该屏幕位于不同的堆栈中。在这种情况下，它不会进入初始路由，而是进入同一个堆栈中的初始屏幕。基本上它只是关闭屏幕，而不是返回到它导航的屏幕（在不同的堆栈中），而是转到它自己的堆栈中的初始屏幕。