Disable back button in react navigation

问题:

I'm using react native navigation (react-navigation) StackNavigator. it starts from the Login page throughout the whole lifecycle of the app. I don't want to have a back option, returning to the Login screen. Does anyone know how it can be hidden on the screen after the login screen? BTW, I'm also hiding it in the login screen by using:

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  // ... other screens here
})

回答1:

For react-navigation version v1 >= 1.0.0-beta.9 , to make the back button disappear:

navigationOptions:  {
    title: 'MyScreen',
    headerLeft: null
}

If you want to clean navigation stack too, you can do something like this (assuming you are on the screen from which you want to navigate from):

import { NavigationActions } from 'react-navigation';

and use a function to navigate to the target route which will have all the back functionality disabled:

resetNavigation(targetRoute) {
  const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: targetRoute }),
    ],
  });
  this.props.navigation.dispatch(resetAction);
}

and then call this.resetNavigation('myRouteWithDisabledBackFunctionality') when you want to navigate to the target route

For react-navigation version v2 you need to use StackAction.reset(...) instead of NavigationActions.reset

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 0, // <-- currect active route from actions array
  actions: [
    NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),
  ],
});

this.props.navigation.dispatch(resetAction);

More info here: https://reactnavigation.org/docs/en/stack-actions.html

回答2:

You can hide the back button using left:null, but for android devices it's still able to go back when the user presses the back button. You need to reset the navigation state and hide the button with left:null

Here are the docs for resetting navigation state: https://reactnavigation.org/docs/navigators/navigation-actions#Reset

This solution works for react-navigator 1.0.0-beta.7, however left:null no longer works for the latest version.

回答3:

Have you considered using this.props.navigation.replace( "HomeScreen" ) instead of this.props.navigation.navigate( "HomeScreen" ).

This way you are not adding anything to the stack. so HomeScreen won't wave anything to go back to if back button pressed in Android or screen swiped to the right in IOS.

More informations check the Documentation. And of course you can hide the the back button by setting headerLeft: null in navigationOptions

回答4:

We need to set false to the gesturesEnabled along with headerLeft to null. Because we can navigate back by swiping the screen as well.

navigationOptions:  {
        title: 'Title',
        headerLeft: null,
        gesturesEnabled: false,
}

回答5:

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}

回答6:

found it myself ;) adding:

  left: null,

disable the default back button.

const MainStack = StackNavigator({
  Login: {
    screen: Login,
    navigationOptions: {
      title: "Login",
      header: {
        visible: false,
      },
    },
  },
  FirstPage: {
    screen: FirstPage,
    navigationOptions: {
      title: "FirstPage",
      header: {
        left: null,
      }
    },
  },

回答7:

We can fix it by setting headerLeft to null

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}

回答8:

In Latest Version (v2) works headerLeft:null. you can add in controller's navigationOptions as bellow

static navigationOptions = {
    headerLeft: null,
  };

回答9:

For latest version of React Navigation, even if you use null in some cases it may still show "back" written!

Go for this in your main app.js under your screen name or just go to your class file and add: -

 static navigationOptions = {
        headerTitle:'Disable back Options',
        headerTitleStyle: {color:'white'},
        headerStyle: {backgroundColor:'black'},
        headerTintColor: 'red',
        headerForceInset: {vertical: 'never'},
        headerLeft: " "
      }