在 React 导航 v6 中移除 Header

Question

移除 React 导航 6 中的 Header 自定义样式这是堆栈导航的代码

 <NavigationContainer>
  <Stack.Navigator
    initialRouteName='OtpScreen'
    // screenOptions={{
    //   headerShown: false,
    // }}
    screenOptions={{ headerMode: 'none' }}
  >
    <Stack.Screen
      options={{ headerShown: false }}
      name='Tabs'
      component={MyTabs}
    />

  </Stack.Navigator>
</NavigationContainer>

标签导航

   <Tab.Navigator
  useHeaderHeight={false}
  screenOptions={
    ({
      headerShown: false,
    },
    ({ route }) => ({
      tabBarIcon: ({ focused, color, size }) => {
        let iconName;

        if (route.name === 'Home') {
          iconName = focused
            ? 'ios-information-circle'
            : 'ios-information-circle-outline';
        } else if (route.name === 'Settings') {
          iconName = focused ? 'ios-list' : 'ios-list';
        }

        // You can return any component that you like here!
        return <Ionicons name={iconName} size={size} color={color} />;
      },
      tabBarActiveTintColor: 'tomato',
      tabBarInactiveTintColor: 'gray',
    }))
  }
>

我使用了所有可能的解决方案仍然没有得到答案我想将它与我显示的自定义样式一起使用

Answer 1

这样添加

 <Stack.Navigator
    initialRouteName='OtpScreen'
    screenOptions={{
      headerShown: false,
    }}
    screenOptions={{ headerMode: 'none' }}
  ></Stack.Navigator>

headerShown：false，这会起作用

Answer 2

在 react-navigation v6 以下为我工作

options={{ headerShown: false }}

这是 堆栈级别的完整示例：

 <Stack.Navigator
    name="Auth"
    initialRouteName="SignIn"
    options={{ headerShown: false }}>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </Stack.Navigator>

屏幕级别的完整示例如下：

    <Stack.Navigator
        name="Auth"
        initialRouteName="SignIn">
        <Stack.Screen name="SignIn" component={SignInScreen}   options={{ headerShown: false }}/>
        <Stack.Screen name="SignUp" component={SignUpScreen}  options={{ headerShown: false }}/>
      </Stack.Navigator>

在 React 导航 v6 中移除 Header

Remove Header in React navigation v6

react-native

react-navigation

react-native-navigation