时间戳

首页 > 解决方案 > 从底部选项卡导航器中删除标题的边框底线。反应导航 v6

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

问题描述

我正在使用react navigation v6andbottom 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-nativereact-navigation

解决方案

React Navigation v6 (Stack Navigator) 有一个属性headerShadowVisible. 提供headerShadowVisibleasfalse将有助于消除 a 中的阴影Stack Navigator。但是，当 aTab 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
  }} 
>

这是小吃

推荐阅读