在 React 导航 v6 中删除标题答案

【问题标题】：Remove Header in React navigation v6在 React 导航 v6 中删除标题
【发布时间】：2021-08-24 13:25:22
【问题描述】：

使用自定义样式删除 React 导航 6 中的标题这是代码敌人堆栈导航

 <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',
    }))
  }
>

我使用了所有可能的解决方案，但仍然没有得到答案，我想用我展示的自定义样式来使用它

【问题讨论】：

标签： react-native react-navigation react-native-navigation

【解决方案1】：

像这样添加

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

headerShown: false，这样就可以了

【讨论】：

screenOptions={{ headerShown: false }} 为我工作，但 headerMode 没有

【解决方案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>

【讨论】：