我正在使用反应原生导航（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.resetor 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
我们需要将 false与togesturesEnabled一起设置。因为我们也可以通过滑动屏幕来导航。headerLeftnull
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 设备上的后退按钮。
如果你的反应导航 v6.x
options={{
title: "Detail Pembayaran",
headerTitleStyle:{
fontWeight:'bold',
},
headerBackVisible:false
}}
参考：反应文档
对于最新版本的带有 Typescript 的 React Navigation 5：
<Stack.Screen
name={Routes.Consultations}
component={Consultations}
options={{headerLeft: () => null}}
/>
从 React Navigation v5.7 开始，文档中有一个新的官方解决方案：
https://reactnavigation.org/docs/preventing-going-back
用作导航侦听器以防止来自 Android 后退按钮、标题后退按钮和自定义后退操作beforeRemove的后退行为。
反应导航版本 >= 1.0.0-beta.9
navigationOptions: {
headerLeft: null
}
自己找到了；）添加：
left: null,
禁用默认的后退按钮。
const MainStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
title: "Login",
header: {
visible: false,
},
},
},
FirstPage: {
screen: FirstPage,
navigationOptions: {
title: "FirstPage",
header: {
left: null,
}
},
},
处理这种情况的最佳选择是使用React 导航提供的 SwitchNavigator 。SwitchNavigator 的目的是一次只显示一个屏幕。默认情况下，它不处理返回操作，并在您切换离开时将路由重置为默认状态。这是身份验证流程中所需的确切行为。
这是一种典型的实现方式。
这是上述语句的代码实现
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',
}
)
);现在在 SplashScreen 中，您将检查令牌并进行相应导航
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 中更改路线，它会自动删除旧路线，因此如果您按下后退按钮，它将不再带您进入身份验证/登录屏幕
简单地做
headerLeft: null
在您阅读此答案时可能已弃用。你应该使用以下
navigationOptions = {
headerTitle : "Title",
headerLeft : () => {},
}
我们可以通过将 headerLeft 设置为 null 来修复它
static navigationOptions =({navigation}) => {
return {
title: 'Rechercher une ville',
headerLeft: null,
}
}
对于反应导航 V6.0
<Stack.Screen
name={'Dashboard'}
component={Dashboard}
options={{
gestureEnabled: false,
headerShown: true,
headerLeft: () => <></>,
}}>
</Stack.Screen>
我正在使用 v6，它对我有用：
<Stack.Screen
name="ApparelsHome"
component={ApparelsHome}
options={{
headerLeft: () => <></>,
}}
/>
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');
ReactNavigation v 5.0 - 堆栈选项：
options={{
headerLeft: () => {
return <></>;
}
}}
您也可以这样做headerLeft:()=>false以摆脱后退按钮
<Stack.Screen name="ImageScreen" component={ShowImage} options={{title:"SMAART", headerLeft:()=>false}} />
在 react-navigation 版本 5.x 中，您可以这样做：
import { CommonActions } from '@react-navigation/native';
navigation.dispatch(
CommonActions.reset({
index: 1,
routes: [
{ name: 'Home' },
{
name: 'Profile',
params: { user: 'jane' },
},
],
})
);
你可以在这里阅读更多。
i think it is simple just add headerLeft : null , i am using react-native cli, so this is the example :
static navigationOptions = {
headerLeft : null
};
虽然提供了很好的答案，但我认为这很简单
useEffect(() => {
props.navigation.addListener("beforeRemove", (e) => {
e.preventDefault();
});
}, [props.navigation]);
对于反应导航版本 4.x
navigationOptions: () => ({
title: 'Configuration',
headerBackTitle: null,
headerLayoutPreset:'center',
headerLeft: null
})
对于最新版本的 React Navigation，即使您在某些情况下使用 null，它仍可能显示“返回”写入！
在您的主 app.js中以您的屏幕名称执行此操作，或者只需转到您的类文件并添加：-
static navigationOptions = {
headerTitle:'Disable back Options',
headerTitleStyle: {color:'white'},
headerStyle: {backgroundColor:'black'},
headerTintColor: 'red',
headerForceInset: {vertical: 'never'},
headerLeft: " "
}
在最新版本 (v2) 中有效headerLeft:null。您可以在控制器中添加navigationOptions如下
static navigationOptions = {
headerLeft: null,
};
headerLeft: null
这在最新的 react native 版本中不起作用
它应该是：
navigationOptions = {
headerLeft:()=>{},
}
对于打字稿：
navigationOptions = {
headerLeft:()=>{return null},
}