在反应导航中禁用后退按钮 [英] Disable back button in react navigation

问题描述

我正在使用反应本机导航(react-navigation)StackNavigator. 它从应用程序整个生命周期的登录"页面开始.我不想使用返回选项，返回登录"屏幕.有谁知道登录屏幕后如何将其隐藏在屏幕上? 顺便说一句，我也通过使用

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)要使后退按钮在react-navigation v2或更高版本中消失:

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

2)如果要清理导航堆栈:

假设您位于要从其导航的屏幕上:

Assuming you are on the screen from which you want to navigate from:

如果您使用的是反应导航版本v5或更高版本，则可以使用navigation.reset或CommonActions.reset:

 // Replace current navigation state with a new one,
 // index value will be the current active route:

navigation.reset({
  index: 0,
  routes: [{ name: 'Profile' }],
});

此处提供来源和更多信息: https://reactnavigation.org/docs/navigation-prop /#reset

Source and more info here: https://reactnavigation.org/docs/navigation-prop/#reset

或者:

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: [
      { name: 'Home' },
      {
        name: 'Profile',
        params: { user: 'jane' },
      },
    ],
  })
);

此处提供来源和更多信息: https://reactnavigation.org/docs/navigation-actions /#reset

Source and more info here: https://reactnavigation.org/docs/navigation-actions/#reset

v2-v4 使用StackActions.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);

v1 使用NavigationActions.reset

3)对于Android，您还必须使用BackHandler禁用硬件后退按钮:

http://reactnative.dev/docs/backhandler.html

或者如果您想使用钩子:

or if you want to use hooks:

https://github.com/react-native-community/hooks#usebackhandler

否则，如果导航堆栈为空，则应用将在按android硬件后退按钮时关闭.

otherwise the app will close at android hardware back button press if navigation stack is empty.

这篇关于在反应导航中禁用后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！