如何删除材质底部选项卡导航器中焦点后面的白色椭圆形

Question

使用@react-navigation/material-bottom-tabs 并遵循本文档

我想知道如何删除活动选项卡图标后面的这个奇怪的白色圆形？

已经2个小时了，我正在尝试一切。我缺少一些东西

（注意：我正在使用文档中示例的相同代码，如果您想使用react-native 0.70.6重现，我在 v 0.68.1 上没有这个问题）

编辑：shifting={true}当我单击选项卡时：

Answer 1

要“删除”选项卡图标，我们可以将其颜色设置为透明。但是，没有直接的方法可以在 中操纵选项卡图标的颜色@react-navigation/material-bottom-tabs。

@react-navigation/material-bottom-tabsBottomNavigation是in的包装react-native-paper。因此，问题在于react-native-paper. 这个问题解决了确切的问题。我们需要对主题进行更改，其中可以控制选项卡图标的颜色。

但是，根据文档，主题react-native-paper不能直接应用于反应导航。我们必须使用Providerfromreact-native-paper并将主题应用到Provider.

请看下面的示例代码和效果。

import * as React from 'react';
import {Text, View} from 'react-native';
import {
  NavigationContainer,
  useNavigationContainerRef,
} from '@react-navigation/native';
import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {DefaultTheme, Provider} from 'react-native-paper';

const Tab = createMaterialBottomTabNavigator();

function HomeScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Home!</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Profile!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Settings!</Text>
    </View>
  );
}

const App = () => {
  const barColors = {
    home: 'aqua',
    settings: 'gold',
    profile: 'lawngreen',
  };

  const [tab, setTab] = React.useState<keyof typeof barColors>('home');
  const navRef = useNavigationContainerRef();

  React.useEffect(() => {
    const unsubscribe = navRef.addListener('state', () => {
      const currRoute = navRef.getCurrentRoute();
      if (currRoute) {
        // A work-around to set background color for the bar after the ripple
        // effect completes. The 200 ms delay comes from trial and error
        setTimeout(() => setTab(currRoute.name as keyof typeof barColors), 200);
      }
    });
    return unsubscribe;
  });

  return (
    <NavigationContainer ref={navRef}>
      <Tab.Navigator
        initialRouteName="home"
        shifting={true}
        activeColor="#e91e63"
        barStyle={{
          backgroundColor: barColors[tab],
        }}>
        <Tab.Screen
          name="home"
          component={HomeScreen}
          options={{
            tabBarColor: barColors.home,
            tabBarLabel: 'Home',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="home" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="settings"
          component={SettingsScreen}
          options={{
            tabBarColor: barColors.settings,
            tabBarLabel: 'Settings',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="cog" color={color} size={26} />
            ),
          }}
        />
        <Tab.Screen
          name="profile"
          component={ProfileScreen}
          options={{
            tabBarColor: barColors.profile,
            tabBarLabel: 'Profile',
            tabBarIcon: ({color}) => (
              <MaterialCommunityIcons name="account" color={color} size={26} />
            ),
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const theme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    secondaryContainer: 'transparent', // Use transparent to disable the little highlighting oval
  },
};

export default function Main() {
  return (
    <Provider theme={theme}>
      <App />
    </Provider>
  );
}