删除React导航v6中的标题

eni9jsuy  于 2023-01-27  发布在  React
关注(0)|答案(3)|浏览(143)

使用自定义样式删除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',
    }))
  }
>

我使用每一个可能的解决方案仍然没有得到答案,我想使用它与自定义样式,因为我所示

azpvetkf

azpvetkf1#

像这样添加

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

标题显示:错误,这将有效

bf1o4zei

bf1o4zei2#

在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>
j9per5c4

j9per5c43#

在我的情况下,我必须将HeaderShowHeaderMode放在同一屏幕选项中

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

相关问题