删除某些屏幕的顶部导航栏答案

【问题标题】：Remove top navigation bar for certain screens删除某些屏幕的顶部导航栏
【发布时间】：2017-09-06 02:18:40
【问题描述】：

有没有办法只删除特定屏幕的顶部导航栏？我正在使用反应导航。

我已经尝试了以下方法：

header: { visible: false }

但它只隐藏导航栏。导航栏的空间仍然无法使用。

提前致谢！

【问题讨论】：

你试过“header: null”吗？我用它来不显示我的标题。
是的，可以，但如何仅在某些屏幕上删除它？
我的做法是为每个屏幕设置导航选项。例如，请参阅下面的答案。

标签： react-native react-navigation

【解决方案1】：

这是我如何使用 StackNavigator 完成我的示例：

const stackN = StackNavigator({
    Screen1 : {
      screen: Screen1,
      navigationOptions: {
        header: null,
      }
    },
    Home : {
      screen: HomeScreen,
      navigationOptions: ({navigation}) => ({
        title: 'Home',
        headerStyle: styles.headerStyle,
        headerTitle: <Text>Home</Text>,
        headerLeft : null,
        headerRight: null,
      })
    }, 
}, {headerMode: 'screen'})

所以每个屏幕都有自己的导航选项。可能有分享navigationOptions的方法，但我暂时没有研究。

【讨论】：

如果可以共享 navigationOptions 会更好。我只希望在登录和启动屏幕上删除导航，其他的会显示。
经过测试，你的回答也满足了去掉某些视图上的导航的需要。您所做的只是在这些特定视图上指定一个导航选项并放置 header: null 属性。
如果我需要显示状态栏怎么办？如果我添加 StatusBar 组件。它没有显示

【解决方案2】：

我像这样使用headerShown 标志：

 import React from 'react';
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import 'react-native-gesture-handler';

 import Welcome from "./compenents/Welcome";
 import Home from "./compenents/Home";

 const Stack = createStackNavigator();

export default function App() {
   return (
      <NavigationContainer>
        <Stack.Navigator>
           <Stack.Screen name="Welcome" component={Welcome} options={{ headerShown: false }} />
           <Stack.Screen name="Home" component={Home} />
        </Stack.Navigator>
      </NavigationContainer>
   );
}

【讨论】：

【解决方案3】：

options={{ headerShown: false }}

你已经完成了......祝你有美好的一天

import { createStackNavigator } from "@react-navigation/stack";
import HomeScreen from "./screens/HomeScreen";
import NewsDetailScreen from "./screens/NewsDetailScreen";
import React from "react";
    
const HomeStack = createStackNavigator();

const HomeScreenStack = () => {
  return (
<HomeStack.Navigator >
  <HomeStack.Screen
    name="homeScreen"
    component={HomeScreen}
    options={{ title: "Home" }}
  />
  <HomeStack.Screen
    name="newsDetailScreen"
    component={NewsDetailScreen}
    options={{
      title: "News Detail",
      headerShown:false
    }}
  />
</HomeStack.Navigator>
  );
};

export default HomeScreenStack;

【讨论】：

【解决方案4】：

当使用 createStackNavigator 时，顶部导航栏可以如下所示被移除。

const AppStack = createStackNavigator({ Home: MainTabNavigator }, { headerMode: 'none' });

【讨论】：

【解决方案5】：

使用navigationOptions: { header: null } 删除顶部导航栏。

示例代码：

import { createStackNavigator, createAppContainer } from 'react-navigation';

import {Login} from './app/components/login/Login';
import {Register} from './app/components/register/Register';
import {Home} from './app/components/home/Home';

const AppNavigator = createStackNavigator(
    {
        Login: { 
                  screen: Login,
                  navigationOptions: {
                    header: null,
                  }
               },
        Register: { 
                    screen: Register, 
                    navigationOptions: {
                      header: null,
                    }  
                  },
        Home: { 
                screen: Home, 
                navigationOptions: {
                  header: null,
                }
              },
    },
    {
        initialRouteName: "Login"
    }
);

export default createAppContainer(AppNavigator);

【讨论】：

【解决方案6】：

使用 navigationOptions: { headerShown: false } 代替 navigationOptions: { header: null } 来移除顶部导航栏。

【讨论】：

【解决方案7】：

React Native 最新版本中的“headerShown : false”

【讨论】：

下面已经回答了。重复答案没有意义。
这个干净多了

【解决方案8】：

2020 => v5：

删除所有屏幕中的标题

Stack.Navigator.defaultProps = {
    headerMode: 'none',
};

【讨论】：