反应导航中导航器之间奇怪的导航行为

Question

我在尝试在反应导航中的导航器之间导航时遇到了一些问题

这是我的导航器设置

// Root Navigator

const RootNavigator = DrawerNavigator({
  Charities: {
    screen: CharitiesNavigator
  },
  Events: {
    screen: EventsNavigator
  },
  MapView: {
    screen: MapView
  }
}, {
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  backBehaviour: 'none',
  contentComponent: ({navigation})=> <Drawer navigation={navigation} />
})

// Charities

const CharitiesNavigator = StackNavigator({
  ChairtiesHome: {
    screen: Charities
  },
  CharityDetail: {
    screen: CharityDetail
  }
}, {
  headerMode: 'screen',
  backBehaviour: 'none',
  cardStyle: {
    backgroundColor: '#F7F9FA'
  }
})

// Events

const EventsNavigator = StackNavigator({
  EventsHome: {
    screen: Events
  },
  EventDetail: {
    screen: EventDetail
  }
}, {
  headerMode: 'screen',
  backBehaviour: 'none',
  cardStyle: {
    backgroundColor: '#F7F9FA'
  }
})

如果用户在 EventDetail 屏幕中，他们可以单击 link，这会将他们带到给定慈善机构的 CharityDetail 屏幕。但是，如果用户随后想要返回，预期的行为将是返回到我们来自的 EventsDetail 屏幕，但是如果您使用 android 或 goBack(x) 上的硬件按钮（我有尝试了 null 并传递了一个密钥）你最终进入了慈善机构主屏幕。

如有任何帮助，我们将不胜感激！

Answer 1

在堆栈导航器中返回的默认操作是从堆栈中弹出一个屏幕。当您导航到 CharityDetail 屏幕时，您实际上是在切换到另一个导航器，然后向堆栈添加一个屏幕。

我认为您需要根据要实现的行为重新考虑导航树的结构。虽然统一堆栈导航器会实现您所追求的即时行为，但它可能会弄乱抽屉。然后，您可以使用抽屉将堆栈导航器重置为您真正想要的任何状态。

反应导航中导航器之间奇怪的导航行为

Weird navigation behaviour between navigators in react-navigation

react-native

react-navigation