php 禁用手机返回键,reactjs-在反应导航中禁用后退按钮

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

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

const MainStack = StackNavigator({

Login: {

screen: Login,

navigationOptions: {

title: "Login",

header: {

visible: false,

},

},

},

// ... other screens here

})

13个解决方案

133 votes

对于反应导航版本v2或更高版本

使后退按钮消失：

navigationOptions: {

title: 'MyScreen',

headerLeft: null

}

如果您也想清理导航堆栈，则可以执行以下操作(假设您位于要从其导航的屏幕上)：

使用NavigationActions.reset

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

const resetAction = StackActions.reset({

index: 0, //

actions: [

NavigationActions.navigate({ routeName: 'myRouteWithDisabledBackFunctionality' }),

],

});

this.props.navigation.dispatch(resetAction);

更多信息在这里：[https://reactnavigation.org/docs/en/stack-actions.html]

对于android，您还必须使用BackHandler禁用硬件后退按钮：

[https://stackoverflow.com/a/40146089/1979861]

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

注意：在旧版本的react-navigation v1中，使用了2584658563264264152576代替StackActions.reset。

Florin Dobre answered 2019-10-25T09:23:37Z

17 votes

您可以使用react-navigator 1.0.0-beta.7隐藏后退按钮，但是对于android设备，当用户按下后退按钮时，它仍然可以后退。 您需要重置导航状态并使用left:null隐藏按钮

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

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

Echo7 answered 2019-10-25T09:24:16Z

14 votes

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

navigationOptions: {

title: 'Title',

headerLeft: null,

gesturesEnabled: false,

}

Gavidi Harikrishna answered 2019-10-25T09:24:41Z

13 votes

您是否考虑过使用headerLeft: null代替navigationOptions。

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

更多信息请查阅文档。当然，您可以通过在navigationOptions中设置headerLeft: null来隐藏“后退”按钮

Tarik Chakur answered 2019-10-25T09:25:20Z

5 votes

使用React Native的BackHandler为我工作。 只需在您的ComponentWillMount中添加以下行：

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

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

OsamaD answered 2019-10-25T09:25:51Z

3 votes

我自己找到的;)添加：

left: null,

禁用默认的后退按钮。

const MainStack = StackNavigator({

Login: {

screen: Login,

navigationOptions: {

title: "Login",

header: {

visible: false,

},

},

},

FirstPage: {

screen: FirstPage,

navigationOptions: {

title: "FirstPage",

header: {

left: null,

}

},

},

EyalS answered 2019-10-25T09:26:23Z

3 votes

react-navigation版本> = 1.0.0-beta.9

navigationOptions: {

headerLeft: null

}

Vaibhav Bacchav answered 2019-10-25T09:26:49Z

1 votes

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');

Scott Davis answered 2019-10-25T09:27:22Z

0 votes

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

static navigationOptions =({navigation}) => {

return {

title: 'Rechercher une ville',

headerLeft: null,

}

}

Klaudia Brysiewicz answered 2019-10-25T09:27:48Z

0 votes

我认为这很简单，只需添加headerLeft : null，我正在使用react-native cli，所以这是示例：

static navigationOptions = {

headerLeft : null

};

Cevin Ways answered 2019-10-25T09:28:13Z

0 votes

对于最新版本的React Navigation，即使在某些情况下使用null，也可能会显示“ back”字样！

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

static navigationOptions = {

headerTitle:'Disable back Options',

headerTitleStyle: {color:'white'},

headerStyle: {backgroundColor:'black'},

headerTintColor: 'red',

headerForceInset: {vertical: 'never'},

headerLeft: " "

}

Rishav Kumar answered 2019-10-25T09:28:47Z

0 votes

在最新版本(v2)中运行headerLeft:null。您可以如下添加控制器navigationOptions

static navigationOptions = {

headerLeft: null,

};

tarikul05 answered 2019-10-25T09:29:14Z

0 votes

对于反应导航版本4.x

navigationOptions: () => ({

title: 'Configuration',

headerBackTitle: null,

headerLayoutPreset:'center',

headerLeft: null

})

Lovekush Vishwakarma answered 2019-10-25T09:29:42Z