隐藏堆栈导航React导航头

我试图使用堆栈和选项卡导航器切换屏幕。

const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});

在这种情况下，首先使用堆栈导航器，然后使用制表器。我想从堆栈导航器中隐藏头文件。这是不正常工作时，我使用导航选项::

navigationOptions: { header: { visible: false } }

我正在尝试在stacknavigator中使用的前两个组件上执行此代码。 如果我使用这一行，然后得到一些错误，如:

enter image description here

383946 次浏览
小开
最佳答案

从版本5开始更新

从版本5开始，它是screenOptions中的选项headerShown

用法示例:

<Stack.Navigator
screenOptions=\{\{
headerShown: false
}}
>
<Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

如果你只想在一个屏幕上隐藏头部，你可以通过在屏幕组件上设置screenOptions来做到这一点，如下所示:

<Stack.Screen options=\{\{headerShown: false}} name="route-name" component={ScreenComponent} />

另请参阅关于版本5的博客

< p > 更新 < br > 从版本2.0.0-alpha.36开始(2019-11-07), < br > 有一个新的navigationOption: headershown 

      navigationOptions: {
headerShown: false,
}

https://reactnavigation.org/docs/stack-navigator#headershown

https://github.com/react-navigation/react-navigation/commit/ba6b6ae025de2d586229fa8b09b9dd5732af94bd

旧的答案

我用这个来隐藏堆栈条(注意这是第二个参数的值):

{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}

当你使用这个方法时，它将隐藏在所有屏幕上。

在你的例子中，它看起来是这样的:

const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification },
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
}
},
{
headerMode: 'none',
navigationOptions: {
headerVisible: false,
}
}
);
小开

在v4上，只需在想要隐藏标题的页面中使用下面的代码

export default class Login extends Component {
static navigationOptions = {
header: null
}
}

参考堆栈导航器

小开

只需将此添加到您的类/组件代码片段和Header将被隐藏

 static navigationOptions = { header: null }
小开

如果你想隐藏在特定的屏幕上，可以这样做:

// create a component
export default class Login extends Component<{}> {
static navigationOptions = { header: null };
}
小开

如果有人搜索如何切换头文件，那么在componentDidMount中写一些像这样的东西:

  this.props.navigation.setParams({
hideHeader: true,
});

当

static navigationOptions = ({ navigation }) => {
const {params = {}} = navigation.state;


if (params.hideHeader) {
return {
header: null,
}
}


return {
headerLeft: <Text>Hi</Text>,
headerRight: <Text>Hi</Text>,
headerTitle: <Text>Hi</Text>
};
};

当事件完成时:

this.props.navigation.setParams({
hideHeader: false,
});
小开

在你的目标屏幕上，你必须编写这样的代码!

 static navigationOptions = ({ navigation }) => {
return {
header: null
}
}
小开

如果你的屏幕是一个类组件

static navigationOptions = ({ navigation }) => {
return {
header: () => null
}
}

在目标屏幕中将其编码为第一个方法(函数)。

小开 
const CallStack = createStackNavigator({
Calls: Calls,
CallsScreen:CallsScreen,
}, {headerMode: 'none'});


CallStack.navigationOptions = {
tabBarLabel: 'Calls',
tabBarIcon: ({ focused }) => (
<TabBarIcon
focused={focused}
name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
/>
),


header: null,


headerVisible: false,


};
小开

这招对我很管用:

const Routes = createStackNavigator({
Intro: {
screen: Intro,
navigationOptions: {
header: null,
}
}
},
{
initialRouteName: 'Intro',
}
);
小开

我使用header : null而不是header : { visible : true }，我使用的是react-native cli。例子如下:

static navigationOptions = {
header : null
};
小开

所有的答案都展示了如何用类组件来实现，但是对于功能组件你需要做:

const MyComponent = () => {
return (
<SafeAreaView>
<Text>MyComponent</Text>
</SafeAreaView>
)
}


MyComponent.navigationOptions = ({ /*navigation*/ }) => {
return {
header: null
}
}

如果你删除了头部，你的组件可能在你看不到的地方(当手机没有方形屏幕时)，所以在删除头部时使用它是很重要的。

小开

在stackNavigator中添加新的navigationOptions对象。

试试这个:

const MainNavigator = createStackNavigator({
LoginPage: {screen : LoginPageContainer, navigationOptions: { header: null } },
MiddlePage: {screen : MiddlePageContainer, navigationOptions: { header: null } },
SMS: {screen: ShowSmsContainer, navigationOptions: { header: null } },
Map: {screen: ShowMapContainer, navigationOptions: { header: null } }
});

希望能有所帮助。

小开 
const MyNavigator = createStackNavigator({
FirstPage: {screen : FirstPageContainer, navigationOptions: { headerShown:false } },
SecondPage: {screen : SecondPageContainer, navigationOptions: { headerShown: false } }
});


//header:null will be removed from upcoming versions
小开

你可以像这样隐藏头文件:

<Stack.Screen name="Login" component={Login} options=\{\{headerShown: false}}  />
小开 
 <Stack.Screen
name="SignInScreen"
component={Screens.SignInScreen}
options=\{\{ headerShown: false }}
/>

options=\{\{ headerShown: false }}适合我。

** "@react-navigation/native": "^5.0.7"， “@react-navigation /栈”:“^ 5.0.8”,< /代码> < / p >

小开

v6

headerMode道具已从React导航6.x中移除。现在我们可以使用headerShown选项来实现相同的结果。

<Stack.Navigator screenOptions=\{\{ headerShown: false }}>
{/* Your screens */}
</Stack.Navigator>

v5

在React导航中，你可以通过将Navigator的headerMode道具设置为false来隐藏所有屏幕的标头。

<Stack.Navigator headerMode={false}>
{/* Your screens */}
</Stack.Navigator>
小开

如果你只想从react-native-navigation中的一个屏幕中删除它，那么:

<Stack.Navigator>
<Stack.Screen
name="Login"
component={Login}
options= \{\{headerShown: false}} />
</Stack.Navigator>
小开
在给定的解决方案中，主屏幕头被-隐藏 选择= \{\{headerShown:假}}< / p > 
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} options=\{\{headerShown:false}}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>
</NavigationContainer>
小开

这适用于堆栈导航

<Stack.Screen
name="Home"
component={HomeComponent}
options=\{\{
headerShown: false,
}}
/>
小开

你可以像这样隐藏StackNavigator头:

const Stack = createStackNavigator();
function StackScreen() {
return (
<Stack.Navigator
screenOptions=\{\{ headerShown: false }}>
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Training" component={Training} />
<Stack.Screen name="Course" component={Course} />
<Stack.Screen name="Signup" component={Signup} />
</Stack.Navigator>
);
}
小开

重要的是要将您使用的反应导航库版本与解决方案相匹配，因为它们都是不同的。对于那些因为某些原因还在使用react-navigation v1.0.0的人来说，这两种方法都有效:

在个别屏幕上禁用/隐藏头信息:

const AppScreens = StackNavigator(
{
Main: { screen: Main, navigationOptions: { header: null } },
Login: { screen: Login },
Profile: { screen: Profile, navigationOptions: { header: null } },
});

禁用/隐藏所有屏幕一次，使用这个:

const AppScreens = StackNavigator(
{
Main: { screen: Main},
Login: { screen: Login },
Profile: { screen: Profile },
},
{
headerMode: 'none',
}
);
小开

在react-navigation的最新版本中，这可以在每个屏幕上隐藏标题:

<Stack.Navigator
headerMode={'none'}
>
<Stack.Screen name="Home" component={HomeScreen}/>
<Stack.Screen name="Details" component={DetailsScreen}/>
</Stack.Navigator>

小开

为4。x， header: null已弃用，应该使用headerShown: false代替

例:

const AppScreens = createStackNavigator({
cover: {
screen: Login,
path: '/login',
navigationOptions: () => ({
headerShown: false,
}),
},
})
小开
  1. 对于单屏幕，你可以像这样在createStackNavigator中设置标题:零或headerShown:假

    const App = createStackNavigator({
First: {
screen: Home,
navigationOptions: {
header: null,
},
},
});
  2. 使用defaultNavigationOptions一次从所有屏幕中隐藏头部

    const App = createStackNavigator({


First: {
screen: HomeActivity,
},
},


{
defaultNavigationOptions: {
header: null
},


});
小开

如果你想从整个屏幕中删除头部，去app.js并将这段代码添加到Stack中。导航器

screenOptions={ { headerShown: false } }
小开

这将从组件类中删除头文件。

export default class SampleClass extends Component {
navigationOptions = {
headerMode: 'none'
}
...
}
小开

对我来说navigationOptions不起作用。下面的方法对我很有效。

<Stack.Screen name="Login" component={Login}
options=\{\{
headerShown: false
}}
/>
小开

使用最新的react-navigation-stack v4可以隐藏头文件

import { createStackNavigator } from 'react-navigation-stack';


createStackNavigator({
stackName: {
screen:ComponentScreenName,
navigationOptions: {
headerShown:false
}
}
})
小开

在V4上，你必须使用这个:

headerLeft: () => { }

这是弃用:

header: null
小开

如果你使用反应导航版本:6。X可以这样用。在这里，SignInScreen头将隐藏下面的代码片段

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

完整的脚本应该是

import {createStackNavigator} from '@react-navigation/stack';
import SignInScreen from '../screens/SignInscreen';
import SignUpScreen from '../screens/SignUpScreen';
const Stack = createStackNavigator();
function MyStack() {
return (
<Stack.Navigator>
<Stack.Screen
name="Sing In"
component={SignInScreen}
options=\{\{
headerShown: false,
}}
/>
<Stack.Screen name="Sing Up" component={SignUpScreen} />
</Stack.Navigator>
);
}
export default function LoginFlowNavigator() {
return <MyStack />;
}
小开

尝试最好的方法，下面的代码适用于我。

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

把上面的代码放在<Stack中。屏幕标签。

<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="LogOut" component={LogOut} options=\{\{ headerShown: false }} />
</Stack.Navigator>
</NavigationContainer>
小开 
/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/


const {Navigator, Screen } =createNativeStackNavigator();


export function AuthRoutes(){
return (
<Navigator
screenOptions={
                

{
contentStyle:{
backgroundColor: 'transparent'
},
headerShown: false
}
}
>
            



</Navigator>
)


}
小开

你只能在新的更新版本(react- navigation版本6)中使用headerperformed:false

import { createStackNavigator } from '@react-navigation/stack';
const Util = createStackNavigator();
const UtilStack = () =>{
return(
<Util.Navigator>
<Util.Screen name='Splash' component={Splash} options=\{\{ headerShown: false }}/>
)
<Util.Navigator>
}
小开

React Native Navigation v6.x 2022年5月< / >强

将false放在Screen的选项道具的headerShown属性中

        <Stack.Navigator initialRouteName="Home">
<Stack.Screen
name="Home"
component={Home}
options=\{\{ headerShown: false }}
/>
</Stack.Navigator>
< p > p。年代
const Stack = createNativeStackNavigator() . < / p >
小开
另一种隐藏特定屏幕标题的方法是尝试使用React中的useLayoutEffect。 这样的:< / p > 
import { View, Text, Button } from "react-native";
import React, { useLayoutEffect } from "react";
import { useNavigation } from "@react-navigation/native";
import useAuth from "../hooks/userAuth";
const HomeScreen = () => {
const navigation = useNavigation();
const { logout } = useAuth();
useLayoutEffect(() => {
navigation.setOptions({
headerShown: false,
});
}, []);


return (
<View>
<Text>I am the HomeScreen</Text>
<Button
title="Go to Chat Screen"
onPress={() => navigation.navigate("Chat")}
/>


<Button title="Logout" onPress={logout} />
</View>
);
};


export default HomeScreen;

这通常允许隐藏组件头，它将在屏幕呈现时执行。

小开

{/*啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦

 <Stack.Screen
options=\{\{ headerShown:false }}
name="Login" component={LoginScreen} />

提交答案