Question

I am having some trouble trying to navigate between Navigators in react-navigation

Here is my Navigator setup

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

If a user is in the EventDetail screen, they can click a link which will take them to the CharityDetail screen for a given charity. However, if the user then wants to go back, the expected behaviour would be to go back to the EventsDetail screen we came from, but if you use either the hardware button on android or goBack(x) (I have tried null and passing a key) you end up in the Charities Home screen instead.

Any help would be greatly appreciated!

Answer 1

返回堆栈导航器的默认操作是从堆栈弹出一个屏幕。当您导航到CharityDetail屏幕时，您真正切换到另一个导航器，然后将一个屏幕添加到堆栈。

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

Weird navigation behaviour between navigators in react-navigation

1 个答案: