Destroy Screen when Navigating the Drawermenu in React Native

Asked

Viewed 554 times

0

I have an application in React Native, and I use the DrawerNavigator as a navigation menu, but when I go from one screen to the other, I would like the previous one to be destroyed.

So when I get back to it, recharge everything like it’s the first time I’m accessing it, some idea of how to do it?

Example of how I create mine stackNavigator:

const StackHome = createStackNavigator({  home: {
screen: Object.assign(home,
  {
    navigationOptions: ({ navigation }) => (
      Object.assign({
        title: "Home",
        headerLeft: <DrawerIcon navigation={navigation} />,
        headerRight:<View></View>
      }, navigationOptions)
    )
  })}}, {  navigationOptions: {
title: "Inicial",
drawerIcon: () => (
  <Icon name="home" size={20} color="#00374c" />
)}});

And so I create mine DrawerNavigator:

const drawMenu = createDrawerNavigator({  StackHome, StackPessoas},{
initialRouteName: 'StackHome',}, {
drawerPosition: 'left',
drawerBackgroundColor: 'red',
drawerWidth: 200, });

I own several const creating StackNavigator, and pass all as parameters in the Drawer to add to Menu.

But I can’t destroy one screen when I step out of it and navigate to another.

react-native react-navigation
  • 1

    Could you add some sample code so we can better understand your problem? I’ve been working hard with Act-Native-Navigator, who knows I can help you....

  • @Marconi edited my question above and added the stack and Drawer Navigator I’m using for my navigations, if you can give me a hand with that. Thanks in advance

  • Use the reset, is exactly what you need. If you can’t get me an answer.

  • I’m not being able to reset because I have different 'Stacknavigator', so each one has an index starting from scratch, I can reset when I have all the routes inside a 'Stacknavigator', but with one for each route I’m not getting it. I return the error: 'Exceptionsmanager.js:74 Error: Error: There is no route defined for key saldocc. Must be one of: 'home' '.

1 answer

1


I managed to solve my problem just by adding the property unmountInactiveRoutes: true directly in the properties of DrawerNavigator, so every time I change the screen, it disassembles the screen that was previously open. It took me a long time to find this property, but in the end it served me very well to dismantle the previous screen.

const drawMenu = createDrawerNavigator({ 
  StackHome, StackPessoas
},{
   unmountInactiveRoutes: true,
   initialRouteName: 'StackMain'
  },{
     drawerPosition: 'left',
     drawerWidth: 200,
    }
);

Browser other questions tagged react-native react-navigation

You are not signed in. Login or sign up in order to post.