在反应导航中禁用后退按钮

Question

我正在使用反应原生导航（react-navigation）StackNavigator。它在应用程序的整个生命周期中从“登录”页面开始。我不想有后退选项，返回登录屏幕。有谁知道登录屏幕后它是如何隐藏在屏幕上的？顺便说一下，我还使用以下方法将其隐藏在登录屏幕中：

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

Answer 1

对于react-navigation版本v1> = 1.0.0-beta.9，要使后退按钮消失：

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

如果你也想清理导航堆栈，你可以做这样的事情（假设你在你想要导航的屏幕上）：

import { NavigationActions } from 'react-navigation';

并使用一个函数导航到目标路由，该路由将禁用所有后台功能：

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

然后在想要导航到目标路线时调用this.resetNavigation('myRouteWithDisabledBackFunctionality')

对于react-navigation v2版本，您需要使用StackAction.reset(...)而不是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);

更多信息：https://reactnavigation.org/docs/en/stack-actions.html

Answer 2

对于最新版本的React Navigation，即使在某些情况下使用null，它仍然可能会显示“后退”！

在屏幕名称下的主app.js中进行此操作，或者只需转到您的类文件并添加： -

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

Answer 3

SwitchNavigator将是实现这一目标的方法。 SwitchNavigator重置默认路由并在调用navigate操作时卸载身份验证屏幕。

import { createSwitchNavigator, createStackNavigator, createAppContainer } from 'react-navigation';

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });
const AuthStack = createStackNavigator({ SignIn: SignInScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

用户进入SignInScreen并输入凭据后，您将调用

this.props.navigation.navigate('App');

Answer 4

我认为添加headerLeft : null很简单，我使用的是react-native cli，所以这是一个例子：

static navigationOptions = {
        headerLeft : null
    };

Answer 5

您可以使用left:null隐藏后退按钮，但对于Android设备，当用户按下后退按钮时，它仍然可以返回。您需要重置导航状态并使用left:null隐藏按钮

以下是重置导航状态的文档：https://reactnavigation.org/docs/navigators/navigation-actions#Reset

此解决方案适用于react-navigator 1.0.0-beta.7，但left:null不再适用于最新版本。

Answer 6

您是否考虑过使用this.props.navigation.replace( "HomeScreen" )而不是this.props.navigation.navigate( "HomeScreen" )。

这样您就不会向堆栈添加任何内容。因此，如果在Android中按下后退按钮或在IOS中向右滑动屏幕，HomeScreen将不会发出任何信息。

更多信息检查Documentation。当然，您可以通过在headerLeft: null中设置navigationOptions来隐藏后退按钮

Answer 7

我们需要将gesturesEnabled和headerLeft设置为null。因为我们也可以通过滑动屏幕来导航回来。

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

Answer 8

react-navigation versions> = 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}

Answer 9

发现它自己;）添加：

  left: null,

禁用默认后退按钮。

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

Answer 10

使用BackHandler from react native为我工作。只需在ComponentWillMount中包含以下行：

BackHandler.addEventListener('hardwareBackPress', function() {return true})

它将禁用Android设备上的后退按钮。

Answer 11

我们可以通过将headerLeft设置为null来修复它

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

Answer 12

在最新版本（v2）工作headerLeft:null。你可以添加控制器的navigationOptions如下

static navigationOptions = {
    headerLeft: null,
  };