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