React native 移除某些屏幕的顶部导航栏

是否有方法仅移除特定屏幕的顶部导航栏？我正在使用react导航

我已经尝试了以下方法：

header: { visible: false }

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

---

提前谢谢

这是我如何使用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'})

const stackN=StackNavigator({
屏幕1：{
屏幕：屏幕1，
导航选项：{
标题：null，
}
},
主页：{
屏幕：主屏幕，
导航选项：（{navigation}）=>({
标题:"家",，
headerStyle:style.headerStyle，
标题：家，
headerLeft:null，
headerRight:null，
})
}, 
}，{headerMode:'screen'}）

---

因此，每个屏幕都有自己的导航选项。可能有一种方法可以共享导航选项，但我目前还没有研究过。

使用createStackNavigator时，可以按如下方式删除顶部导航栏

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

---

使用

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

---

使用导航选项：{headerShown:false}而不是导航选项：{header:null}删除顶部导航栏。

在最新的React本地版本中，“headerShown:false”我使用

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

从“React”导入React；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
导入“反应本机手势处理程序”；
从“/components/Welcome”导入欢迎信息；
从“/components/Home”导入主页；
const Stack=createStackNavigator（）；
导出默认函数App（）{
返回(
);
}

2020=>v5:

删除所有屏幕中的标题

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

你完了。。祝你今天愉快

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;

从“@react navigation/stack”导入{createStackNavigator}；
从“/screens/HomeScreen”导入主屏幕；
从“/screens/NewsDetailScreen”导入NewsDetailScreen；
从“React”导入React；
const HomeStack=createStackNavigator（）；
const HomeScreenStack=（）=>{
返回(
);
};
导出默认HomeScreenStack；

您是否尝试过改为“header:null”？我用它在我的屏幕上不显示标题。是的，这样做了，但是只在某些屏幕上删除它怎么样？我这样做的方式是在每个屏幕上都有导航选项。例如，请参见下面我的答案。如果有一种共享导航选项的方法，那会更好。我只想删除登录和启动屏幕上的导航，其他的将显示。测试后，您的答案也满足删除某些视图上导航的需要。您所做的只是在这些特定视图上指定一个导航选项，并放置

标题：null

属性。如果需要显示状态栏怎么办？如果我添加状态栏组件。下面已经给出了答案。重复回答没有意义。

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;