如何删除 React Navigation Material 底部选项卡导航器中的活动图标背景

Question

我在使用 React Navigation Material Bottom Tabs Navigator 时遇到一些样式问题。有一个背景，它会自动应用于活动选项卡，但我无法对其进行样式设置（我在下图中突出显示了它）。

选项卡问题

有人可以帮忙吗？我的代码如下：

<Tab.Navigator
    initialRouteName="Home"
    labeled={false}
    shifting={false}
    activeColor="#333"
    inactiveColor="#999999"
    inactiveBackgroundColor='#000'
    barStyle={{
        paddingHorizontal: 10,
            backgroundColor: '#ffffff',
    }}
>
    <Tab.Screen
        name='Home'
        component={HomeScreen}
            options={{
                tabBarLabel: 'Home',
                tabBarIcon: ({ color }) => (
                    <MaterialCommunityIcons name="home" color={color} size={26} />
                ),
            }}
    />
</Tab.Navigator>

我已经阅读了所有 React Navigation 文档，但没有提及。

Answer 1

好的，如果这对其他人有帮助，我找到了如何设置活动选项卡颜色的样式。它可以以 React Native Paper 为主题。首先，将您的路由组件包装在 Paper 主题提供程序中，并为应用程序设置一个主题：

import React from 'react';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { DefaultTheme } from './src/themes/defaultTheme'
import { Main } from './src/main';

const theme = {
    ...DefaultTheme,
};

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

我发现 Native Paper 默认主题很难让自定义颜色发挥作用，因此我自己创建了一个自定义主题。您会在动态主题颜色部分找到一些很棒的选项：

react-native-paper/theming.html#creating-dynamic-theme-colors

我的自定义主题文件如下所示：

export const DefaultTheme = {
  "colors": {
    "primary": "rgb(0, 104, 116)",
    "onPrimary": "rgb(255, 255, 255)",
    "primaryContainer": "rgb(151, 240, 255)",
    "onPrimaryContainer": "rgb(0, 31, 36)",
    "secondary": "rgb(74, 98, 103)",
    "onSecondary": "rgb(255, 255, 255)",
    "secondaryContainer": "rgb(205, 231, 236)",
    "onSecondaryContainer": "rgb(5, 31, 35)",
    etc...
  }
}

secondaryContainer颜色是活动选项卡指示器背景颜色。将其更改为您想要的任何内容，瞧！快乐编码。