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

我正在使用本地反应导航(反应-导航) StackNavigator。 它从登录页面开始，贯穿整个应用程序的生命周期。我不希望有一个返回选项，返回到登录屏幕。有没有人知道登录后如何隐藏在屏幕上？ 顺便说一下，我也把它隐藏在登录屏幕上，使用:

const MainStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
title: "Login",
header: {
visible: false,
},
},
},
// ... other screens here
})
177843 次浏览
小开

我自己发现的;) 他补充说:

  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,
}
},
},
小开

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

下面是用于重置导航状态的文档: < br/> < a href = “ https://reactnavation.org/docs/導航操作 # 重置”rel = “ nofollow noReferrer”> https://reactnavigation.org/docs/navigation-actions#reset

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

小开
最佳答案

1)在反应式导航中使后退按钮消失

V5或更新版本 :

{
navigationOptions:  {
title: 'MyScreen',
headerLeft: ()=> null,
// `headerLeft: undefined` should work too
// `headerLeft: null` should work but could trigger a TS error
}

注意: V6 有一个额外的选项: headerBackVisible: false

后面的按钮是不是 您可以使用它来显示一个后退按钮 如果指定了 headerLeft，则为。

Https://reactnavigation.org/docs/native-stack-navigator/#headerbackvisible

V2-v4:

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

2)如果你想清理导航栈:

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

如果您使用的是反应导航版本5或更新的 ，您可以使用 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

或者:

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

资料来源: 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);

使用 NavigationActions.reset

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

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

或者如果你想使用钩子:

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

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

Additional sources: thank you to the users that added comments below and helped keeping this answer updated for v5.

小开

react-navigation versions >= 1.0.0-beta.9

navigationOptions:  {
headerLeft: null
}
小开

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

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

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

navigationOptions:  {
title: 'Title',
headerLeft: null,
gestureEnabled: false,
}
小开

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

static navigationOptions = {
headerLeft: null,
};
小开

你有没有考虑过用 this.props.navigation.replace( "HomeScreen" )代替 this.props.navigation.navigate( "HomeScreen" )。

这样，您就不会向堆栈中添加任何内容。因此，如果在 Android 中按下返回按钮或在 IOS 中向右滑动屏幕，HomeScreen 将不会挥动任何东西返回。

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

小开

对于最新版本的反应导航，即使您使用空在某些情况下，它仍然可能显示“回”写！

在你的 主应用程序中使用你的网名，或者直接转到你的 类别档案并添加:-

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

开关导航器将是实现这一点的方法。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');
小开

using the BackHandler from react native worked for me. Just include this line in your ComponentWillMount: 

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

it will disable back button on android device.

小开

我认为这是简单的，只需添加 headerLeft : null，我使用的是反应原生的 cli，所以这是一个例子:

static navigationOptions = {
headerLeft : null
};
小开

For react-navigation version 4.x

navigationOptions: () => ({
title: 'Configuration',
headerBackTitle: null,
headerLayoutPreset:'center',
headerLeft: null
})
小开

处理这种情况的最佳选择是使用 反应式导航提供的 Switch Navigator。SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理回退操作，当您切换到其他操作时，它会将路由重置为默认状态。这正是身份验证流中需要的确切行为。

这是一种典型的实现方式。

  1. 创建2个堆栈导航器: 一个用于身份验证(登录、注册、忘记密码等) ，另一个用于主 APP
  2. Create a screen in which you will check which route from switch navigator you want to show (I usually check this in splash screen by checking if a token is stored in Async storage)

Here is a code implementation of above statements

import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from "./homeScreenPath"
import OtherScreen from "./otherScreenPath"
import SignInScreen from "./SignInScreenPath"
import SplashScreen from "./SplashScreenPath"


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


const AuthStack = createStackNavigator({ SignIn: SignInScreen });




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

Now in SplashScreen you will check the token and navigate accordingly 

import React from 'react';
import {
ActivityIndicator,
AsyncStorage,
StatusBar,
StyleSheet,
View,
} from 'react-native';


class SplashScreen extends React.Component {
componentDidMount() {
this.checkIfLogin();
}


// Fetch the token from storage then navigate to our appropriate place
checkIfLogin = async () => {
const userToken = await AsyncStorage.getItem('userToken');


// This will switch to the App screen or Auth screen and this splash
// screen will be unmounted and thrown away.
this.props.navigation.navigate(userToken ? 'App' : 'Auth');
};


// Render any loading content that you like here
render() {
return (
<View>
<ActivityIndicator />
<StatusBar barStyle="default" />
</View>
);
}
}

一旦您在 Switch Navigator 中更改了路由，它将自动删除旧路由，因此如果您按下后退按钮，它将不再带您进入认证/登录屏幕

小开

就这么简单

headerLeft: null

当你读到这个答案的时候，可能已经不再赞成了。 您应该使用以下命令

   navigationOptions = {
headerTitle : "Title",
headerLeft : () => {},
}
小开 
headerLeft: null

这在最新的本地反应版本中不起作用

它应该是:

navigationOptions = {
headerLeft:()=>{},
}

打字稿:

navigationOptions = {
headerLeft:()=>{return null},
}
小开

For the latest version React Navigation 5 with Typescript:

<Stack.Screen
name={Routes.Consultations}
component={Consultations}
options=\{\{headerLeft: () => null}}
/>
小开

ReactNavigation v 5.0 - Stack option:

options=\{\{
headerLeft: () => {
return <></>;
}
}}
小开

在反应导航版本5.x 中，你可以这样做:

import { CommonActions } from '@react-navigation/native';


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

你可以阅读更多的 给你。

小开

Since React Navigation v5.7, there's been a new official solution from the docs:

Https://reactnavigation.org/docs/preventing-going-back

使用 beforeRemove作为导航侦听器，可以防止 Android 后退按钮、标题后退按钮和自定义后退操作的后退行为。

小开

虽然提供了很好的答案，但我认为这很简单

    useEffect(() => {
props.navigation.addListener("beforeRemove", (e) => {
e.preventDefault();
});
}, [props.navigation]);
小开

我用的是 V6，对我很有用:

 <Stack.Screen
name="ApparelsHome"
component={ApparelsHome}
options=\{\{
headerLeft: () => <></>,
}}
/>
小开

If your react navigation v6.x

options=\{\{
title: "Detail Pembayaran",
headerTitleStyle:{
fontWeight:'bold',
},
headerBackVisible:false
}}

参考资料: 反应文件

小开

你也可以做 headerLeft:()=>false去掉后退按钮

<Stack.Screen name="ImageScreen" component={ShowImage} options=\{\{title:"SMAART", headerLeft:()=>false}} />
小开

用于反应导航 V6.0

<Stack.Screen
name={'Dashboard'}
component={Dashboard}
options=\{\{
gestureEnabled: false,
headerShown: true,
headerLeft: () => <></>,
}}>
</Stack.Screen>
小开 
import React,{useEffect,useState,useRef} from 'react';
import { BackHandler,View } from 'react-native';


export default function App() {


useEffect(() => {
const backHandler = BackHandler.addEventListener('hardwareBackPress', () => true)
return () => backHandler.remove()
}, [])


return(
<View>


</View>
)}
小开

我在旧的项目中使用反应导航版本4的工作
我试过了，但是只有一个办法。

passwordEntry: {
screen: passwordEntry,
navigationOptions: {
gestureEnabled: false,
},
},
小开

如果您正在使用本地 expo CLI，那么您可以简单地使用

Options = \{\{ headerBackVisible: false }}

小开

要删除回头按钮

 options=\{\{ headerBackVisible:false,}}

完整标签

<Stack.Screen name="Name" component={NameScreen} options=\{\{ headerBackVisible:false,}} />

提交答案