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

【问题标题】：Remove header's border bottom line from bottom tab Navigator. React Navigation v6从底部选项卡导航器中删除标题的边框底线。反应导航 v6
【发布时间】：2021-08-25 10:47:59
【问题描述】：

我正在使用react navigation v6 和bottom tab navigator，并且在这个版本的反应导航底部选项卡导航器中默认提供一个标题。我想删除标题的底线，但没有 headerStyle 属性或内部 headerLeftContainerStyle 属性，我试图通过高程、阴影和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;

【问题讨论】：

标签： react-native react-navigation

【解决方案1】：

React Navigation v6 (Stack Navigator) 有一个属性headerShadowVisible。将headerShadowVisible 提供为false 将有助于消除Stack Navigator 中的阴影。但是，当Tab Navigator 作为孩子提供时，这似乎不起作用。这仍然可以通过提供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

【讨论】：

【解决方案2】：

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

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

【讨论】：