从底部选项卡导航器中删除 header 的边框底线。反应导航 v6

Question

我正在使用 react navigation v6 和 bottom tab navigator，在此版本的 React 导航底部选项卡导航器中默认提供 Header。我想删除 header 的底线，但没有 headerStyle 属性或 headerLeftContainerStyle 属性内部，我试图通过海拔删除线, shadow 和 borderBottomWidth 但什么都没发生

import React from 'react';
import { Image, View } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Home from '../screens/Main/Home'
import Profile from '../screens/Main/Profile'
import Favourites from '../screens/Main/Favourites'
import Recents from '../screens/Main/Recents'
import { Ionicons, Feather } from '@expo/vector-icons';
import theme from '../constants/theme';
const Tab = createBottomTabNavigator();
 <Ionicons  name="ios-menu-sharp" size={32} color="green" /> 
function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: 'rgb(242,242,242)' },
        tabBarStyle: {
          backgroundColor: 'rgb(242,242,242)',
          paddingBottom: 25,
          elevation: 0,
          borderTopWidth: 0,
          shadowOffset: {
            width: 0, height: 0 // for iOS
          },
          height: 70,
        },
        tabBarShowLabel: false,
        headerTitle: '',
        headerStatusBarHeight: 59,
        headerLeftContainerStyle: {paddingLeft: 30, borderBottomWidth: 0, elevation: 0},
        headerRightContainerStyle: {paddingRight: 35, borderBottomWidth: 0},
        tabBarActiveTintColor: theme.primary,
        tabBarInactiveTintColor: theme.secondary,
        // headerTransparent: true,
        headerLeft: () => <Image source={require('../../assets/icons/menu.png')} style={{ height: 19 }} resizeMode={'contain'} />,
        headerRight: () => <Feather name={'shopping-cart'} size={28} color={theme.secondary}/>
      }}
    >
      <Tab.Screen name="Home" component={Home} options={{tabBarIcon: (props) =>  <Ionicons  name="home" size={props.size} color={props.color} /> }} />
      <Tab.Screen name="Favorite" component={Favourites} options={{tabBarIcon: (props) =>  <Ionicons  name="heart" size={props.size} color={props.color} /> }}/>
      <Tab.Screen name="Profile" component={Profile} options={{tabBarIcon: (props) =>  <Ionicons  name="person" size={props.size} color={props.color} /> }}/>
      <Tab.Screen name="Recents" component={Recents} options={{tabBarIcon: (props) =>  <Ionicons  name="ios-timer" size={props.size} color={props.color} /> }}/>
    </Tab.Navigator>
  );
}

export default MyTabs;

Answer 1

请使用它来去除阴影。使用必须将 高度设置为 0

 <Stack.Navigator  
      screenOptions={{
        headerTitleStyle: {
          fontSize:16, 
        },
        headerStyle:{
          elevation:0
        },
        headerTitleAlign:'center',
        gestureEnabled:false,
       
      }} 
      independent={true}
          >
  // your code 
</Stack.Navigator>

Answer 2

React Navigation v6（Stack Navigator）有一个属性 headerShadowVisible。将 headerShadowVisible 提供为 false 将有助于消除 Stack Navigator 中的阴影。但是，当 Tab Navigator 作为 child 提供时，这似乎不起作用。这仍然可以通过提供 headerStyle 来移除阴影来解决。

<Tab.Navigator
  screenOptions={{
    headerStyle: { 
      backgroundColor: 'rgb(242,242,242)',
      // below four properties will remove the shadow
      borderBottomColor: "transparent",
      shadowColor: 'transparent',
      borderBottomWidth: 0,
      elevation: 0
    },

    ...... all the other stuff
  }} 
>

这是Snack

从底部选项卡导航器中删除 header 的边框底线。反应导航 v6

Remove header's border bottom line from bottom tab Navigator. React Navigation v6

react-native

react-navigation