我正在使用 React Native 导航 (react-navigation) StackNavigator。它从登录页面开始，贯穿应用程序的整个生命周期。我不想有返回选项，返回登录屏幕。有谁知道如何在登录屏幕后隐藏在屏幕上？顺便说一句，我还使用以下方法将其隐藏在登录屏幕中：
const MainStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
title: "Login",
header: {
visible: false,
},
},
},
// ... other screens here
})
1) 要使后退按钮在 react-navigation v2 或更新版本中消失：
v2-v4：
navigationOptions: {
title: 'MyScreen',
headerLeft: null
}
v5：
{
navigationOptions: {
title: 'MyScreen',
headerLeft: ()=> null, // Note: using just `null` instead of a function should also work but could trigger a TS error
}
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) 对于 android，您还必须使用 BackHandler 禁用硬件后退按钮：
http://reactnative.dev/docs/backhandler.html
或者如果你想使用钩子：
https://github.com/react-native-community/hooks#usebackhandler
否则，如果导航堆栈为空，应用程序将在按下 android 硬件后退按钮时关闭。
其他来源：感谢在下面添加评论并帮助更新 v5 的此答案的用户。
您是否考虑过使用this.props.navigation.replace( "HomeScreen" )而不是this.props.navigation.navigate( "HomeScreen" ).
这样您就不会向堆栈中添加任何内容。因此，如果在 Android 中按下后退按钮或在 IOS 中向右滑动屏幕，则 HomeScreen 不会挥动任何要返回的内容。
更多信息请查看文档。当然，你可以通过设置隐藏后退按钮headerLeft: null在navigationOptions
我们需要将 falsegesturesEnabled与headerLeftto一起设置null。因为我们也可以通过滑动屏幕来导航回来。
navigationOptions: {
title: 'Title',
headerLeft: null,
gestureEnabled: false,
}
您可以使用 隐藏后退按钮left:null，但对于 android 设备，当用户按下后退按钮时，它仍然可以返回。您需要重置导航状态并隐藏按钮left:null
以下是重置导航状态的文档：https :
//reactnavigation.org/docs/navigation-actions#reset
此解决方案适用于react-navigator 1.0.0-beta.7，但left:null不再适用于最新版本。
使用来自 react native 的 BackHandler 对我有用。只需在您的 ComponentWillMount 中包含这一行：
BackHandler.addEventListener('hardwareBackPress', function() {return true})
它将禁用 android 设备上的后退按钮。