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

Question

使用

@react-navigation/material-bottom-tabs

并遵循此doc

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

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

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

编辑：当我单击选项卡时，也使用

shifting={true}

：

Answer 1

要“删除”选项卡图标，我们可以将其颜色设置为透明。但是，没有直接的方法可以在

@react-navigation/material-bottom-tabs

内操纵选项卡图标的颜色。

@react-navigation/material-bottom-tabs

是

BottomNavigation

中

react-native-paper

的包装。因此，问题在于

react-native-paper

。这个SO问题解决了确切的问题。我们需要对主题进行更改，其中可以控制选项卡图标的颜色。

但是，根据doc，来自

react-native-paper

的主题不能直接应用于反应导航。我们必须使用

Provider

中的

react-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>
  );
}

Answer 2

基于凡尘宝的解决方案：

我无法触发 useEffect 清理（因此无法访问导航和当前状态）。我找到了使用 NavigatorContainer onStateChange prop 和 state.index 的可能替代方案。这些数字取决于您显示选项卡屏幕的顺序。

这是关于索引的文档参考（https://reactnavigation.org/docs/navigation-state/#partial-state-objects）：

这也适用于索引属性：

index should be the last route in a stack,

，如果指定了不同的值，React Navigation 会修复它。

对于这种情况，不需要 useNavigationContainerRef 和 useEffect。我只复制我添加或更改的部分：

我编辑了我的答案，因为我刚刚测试了它，也可以使用 NavigatorContainer 主题道具并避免使用 Provider。

export default function App() {

// The numbers depends on the order that you display the Tab.Screens on the Tab.Navigator
const barColors = {
    // Tab.Screen home
    0: 'aqua',  
    // Tab.Screen settings
    1: 'gold',
    // Tab.Screen profile
    2: 'lawngreen',
  };

const [tab, setTab] = useState(0);

const stateChanger = (state) => {
  setTab(state.index)
}

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

return (
    <NavigationContainer  
        onStateChange={stateChanger}
        theme={theme}
    >

Answer 3