在堆栈导航器 React 导航中隐藏 header

Question

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

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

在这种情况下，首先使用堆栈导航器，然后使用选项卡导航器。我想从堆栈导航器中隐藏 headers。当我使用像 ::

这样的导航选项时，它不能正常工作

navigationOptions: { header: { visible: false } }

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

Answer 1

从版本 5 开始更新

从版本 5 开始，它是 screenOptions

中的选项 headerShown

用法示例：

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

如果您只想在 1 个屏幕上隐藏 header，您可以通过在屏幕组件上设置屏幕选项来做到这一点，例如：

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

另见 blog 关于版本 5

更新
自版本 2.0.0-alpha.36 (2019-11-07) 起，
有一个新的导航选项：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,
  }
 }
);

Answer 2

在 v4 上，只需在要隐藏页眉的页面中使用以下代码

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

参考Stack Navigator

Answer 3

只需将其添加到您的 class/component 代码段中，Header 就会被隐藏

 static navigationOptions = { header: null }

Answer 4

如果你想在特定屏幕上隐藏而不是这样做：

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

Answer 5

如果有人搜索如何切换 header 那么在 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,
});

Answer 6

In your targeted screen you have to code this !

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

Answer 7

如果您的屏幕是 class 组件

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

在您的目标屏幕中将其编码为第一个方法（函数）。

Answer 8

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,

};

Answer 9

这对我有用：

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

Answer 10

我正在使用 header : null 而不是 header : { visible : true } 我正在使用 react-native cli。这是例子：

static navigationOptions = {
   header : null   
};

Answer 11

所有答案都展示了如何使用 class 组件，但对于功能组件，您可以这样做：

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

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

如果你删除 header 你的组件可能会在你看不到的地方（当 phone 没有方形屏幕时）所以在删除时使用它很重要header.

Answer 12

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

希望对您有所帮助。

Answer 13

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

//header:null will be removed from upcoming versions

Answer 14

你可以这样隐藏header：

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

Answer 15

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

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

** "@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",

Answer 16

v6

headerMode 道具已从 反应导航 6.x 中删除。现在我们可以使用 headerShown 选项来获得相同的结果。

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

v5

在反应导航5.x中，您可以通过设置[=15=的headerMode属性来隐藏所有屏幕的header ] 到 false.

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

Answer 17

如果您只想将其从 react-native-navigation 中的一个屏幕中删除，则：

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

Answer 18

在给定的解决方案中，Header 已针对主屏幕隐藏 - 选项={{headerShown:false}}

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}}/>
    <Stack.Screen name="Details" component={DetailsScreen}/>
  </Stack.Navigator>
</NavigationContainer>

Answer 19

这适用于堆栈导航

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

Answer 20

您可以像这样隐藏 StackNavigator header：

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

Answer 21

请务必将您使用的 react-navigation 库版本与解决方案相匹配，因为它们各不相同。对于那些像我一样出于某种原因仍在使用 react-navigation v1.0.0 的人，这两种方法都有效：

对于 disabling/hiding header 在个人屏幕上：

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

对于 disabling/hiding 所有屏幕一次，使用此：

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

Answer 22

在最新版本的 react-navigation 中，这可以在每个屏幕上隐藏 header：headerMode={'none'}

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

Answer 23

对于 4.x，header: null 已弃用，应使用 headerShown: false 代替

例如：

const AppScreens = createStackNavigator({
  cover: {
    screen: Login,
    path: '/login',
    navigationOptions: () => ({
      headerShown: false,
    }),
  },
})

Answer 24

对于单屏，可以设置header:null或者header显示：false 在这样的 createStackNavigator 中

const App = createStackNavigator({
 First: {
screen: Home,
navigationOptions: {
  header: null,
                   },
       },
});

使用 defaultNavigationOptions

一次性从所有屏幕隐藏 header

const App = createStackNavigator({

First: {
  screen: HomeActivity,
},
},

{
defaultNavigationOptions: {
  header: null
},

});

Answer 25

如果您想从所有屏幕中删除 header 转到 app.js 并将此代码添加到 Stack.Navigator

screenOptions={ { headerShown: false } }

Answer 26

这将从组件 class 中删除 header。

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

Answer 27

对我来说 navigationOptions 没用。以下对我有用。

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

Answer 28

使用最新的 react-navigation-stack v4 你可以用

隐藏 header

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

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

Answer 29

在 V4 你必须使用这个：

headerLeft: () => { }

这是弃用:

header: null

Answer 30

如果你使用 react-navigation 版本: 6.x 你可以这样使用。此处，SignInScreen header 将通过以下代码段

隐藏

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

Answer 31

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

options={{
    headerShown: false,
}}

把上面的代码放在

<NavigationContainer> <Stack.Navigator> <Stack.Screen name="LogOut" component={LogOut} options={{ headerShown: false }} /> </Stack.Navigator> </NavigationContainer>

Answer 32

/*...*/
import { createNativeStackNavigator } from "@react-navigation/native-stack";
/*...*/

const {Navigator, Screen } =createNativeStackNavigator();

export function AuthRoutes(){
    return (
        <Navigator
            screenOptions={
                
                {
                    contentStyle:{
                        backgroundColor: 'transparent'
                    },
                    headerShown: false
                }
            }    
        >
            

        </Navigator>
    )

}

Answer 33

You can use headerShown:false in the new updated version only ( react-naviagion version 6 )

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

Answer 34

React Native 导航v6.x 2022 年 5 月

将 false 放入 headerShown 属性的 options prop of Screen

        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ headerShown: false }}
          />
        </Stack.Navigator>

P.S
const Stack = createNativeStackNavigator().

在堆栈导航器 React 导航中隐藏 header

Hide header in stack navigator React navigation

javascript

react-native

react-navigation

expo

v6

v5