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

Question

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

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

Answer 1

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

后退按钮是否为 在标题中可见。您可以使用它在旁边显示后退按钮 标题左(如果已指定)。

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

v2-v4：

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

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

假设您位于要从中导航的屏幕上：

如果您使用的是 react-navigation 版本 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

或：

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

v1使用NavigationActions.reset

3)对于安卓，您还必须使用BackHandler禁用硬件后退按钮：

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

或者如果你想使用钩子：

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

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

其他来源：感谢在下面添加评论并帮助更新 v5+ 答案的用户。

Answer 2

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

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

有关详细信息，请查看文档。 当然，您可以通过在navigationOptions中设置headerLeft: null来隐藏后退按钮

Answer 3

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

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

Answer 4

如果你的反应导航v6.x

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

参考 ： 反应文档

Answer 5

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

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

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

Answer 6

使用来自 react native 的 BackHandler 对我有用。只需在 ComponentWillMount 中包含此行：

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

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

Answer 7

对于反应导航 V6.0

<Stack.Screen
name={'Dashboard'}
component={Dashboard}
options={{
gestureEnabled: false,
headerShown: true,
headerLeft: () => <></>,
}}>
</Stack.Screen>

Answer 8

自己发现;) 添加：

left: null,

禁用默认的后退按钮。

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

Answer 9

反应导航版本>= 1.0.0-beta.9

navigationOptions:  {
headerLeft: null
}

Answer 10

对于最新版本的 React Navigation 5 with Typescript：

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

Answer 11

自 React Navigation v5.7 以来，文档中有了新的官方解决方案：

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

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

Answer 12

我正在使用v6，它对我有用：

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

Answer 13

处理这种情况的最佳选择是使用 React 导航提供的 SwitchNavigator。SwitchNavigator的目的是一次只显示一个屏幕。默认情况下，它不处理后退操作，并在您切换离开时将路由重置为其默认状态。这是身份验证流中所需的确切行为。

这是实现它的典型方法。

1. 创建 2 个堆栈导航器：一个用于身份验证(登录、注册、忘记密码等)，另一个用于主 APP
2. 创建一个屏幕，您将在其中检查要显示的切换导航器的路线(我通常通过检查令牌是否存储在异步存储中来在初始屏幕中检查这一点)

这是上述语句的代码实现

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

现在，在启动画面中，您将检查令牌并相应地导航

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

一旦您在SwitchNavigator中更改路线，它就会自动删除旧路线，因此如果您按后退按钮，它将不再将您带到身份验证/登录屏幕

Answer 14

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

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

Answer 15

简单地做

headerLeft: null

当您阅读此答案时，可能会被弃用。 您应该使用以下方法

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

Answer 16

反应导航 v 5.0 - 堆栈选项：

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

Answer 17

删除后退标题按钮

options={{ headerBackVisible:false,}}

完整标签

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

Answer 18

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

用户转到登录屏幕并输入其凭据后，您将调用

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

Answer 19

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>
)}

Answer 20

如果您使用的是 react native expo cli，那么您可以简单地使用

options={{headerBackVisible：false}}

Answer 21

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

static navigationOptions = {
headerLeft : null
};

Answer 22

对于最新版本的 React Navigation，即使您在某些情况下使用 null，它仍然可能显示"back"写入！

在您的主应用程序中执行此操作.js在您的屏幕名称下，或者只是转到您的类文件并添加：-

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

Answer 23

在最新版本 (v2) 中headerLeft:null工作。 您可以在下面添加控制器navigationOptions

static navigationOptions = {
headerLeft: null,
};

Answer 24

对于反应导航版本 4.x

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

Answer 25

headerLeft: null

这在最新的 react 本机版本中不起作用

它应该是：

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

对于打字稿：

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

Answer 26

在 react-navigation 版本 5.x 中，你可以这样做：

import { CommonActions } from '@react-navigation/native';
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);

您可以在此处阅读更多内容。

Answer 27

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

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

Answer 28

您也可以执行headerLeft:()=>false来摆脱后退按钮

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

Answer 29

我正在处理使用React Navigation Version 4
我尝试过的旧项目，但只有事情有效是..

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

Answer 30

您可以使用

选项={{手势启用：假}}

您可以声明屏幕的位置。

<AuthStack.Screen name="Dashboard" component={DashBoardContainer} options={{gestureEnabled: false}} />

这对我有用