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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在反应导航中禁用后退按钮相关的知识,希望对你有一定的参考价值。

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

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

对于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

另一答案

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

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

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

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');
另一答案

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

static navigationOptions = {
        headerLeft : null
    };
另一答案

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

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

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

另一答案

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

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

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

另一答案

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

navigationOptions:  {
        title: 'Title',
        headerLeft: null,
        gesturesEnabled: false,
}
另一答案

react-navigation versions> = 1.0.0-beta.9

navigationOptions:  {
headerLeft: null}
另一答案

发现它自己;)添加:

  left: null,

禁用默认后退按钮。

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

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

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

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

另一答案

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

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

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

static navigationOptions = {
    headerLeft: null,
  };

以上是关于在反应导航中禁用后退按钮的主要内容,如果未能解决你的问题,请参考以下文章

如何在 React Native 中的启动画面后禁用后退按钮

使用导航控制器按下后退按钮后如何防止前一个片段显示?

导航抽屉,处理后退按钮以转到以前的片段?

Android导航组件后退按钮不起作用

如何在反应导航中更改后退按钮路线

如何在使用Android Jetpack导航时禁用导航图标