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

Question

有没有办法只删除特定屏幕的顶部导航栏？我正在使用react-navigation.

我已经尝试过以下方法:

header: { visible: false }

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

提前致谢!

Answer 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,但我目前还没有调查过.

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

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