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

qoefvg9y  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(138)

我有一些风格问题与React导航材料底部标签导航。有一个背景,这是自动应用到活动标签,我不能风格(我已经突出显示它在下面的图片)。
Tab Issue
有人能帮忙吗?我的代码如下:

<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导航文件,但没有提到。

rqcrx0a6

rqcrx0a61#

好吧,如果这对其他人有帮助的话,我找到了如何设计活动标签的颜色。它可以用React Native Paper作为主题。首先,在Paper主题提供程序中 Package 您的路线组件,并为应用程序设置一个主题:

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/主题化.html#创建动态主题颜色
我的自定义主题文件如下所示:

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颜色是当前标签指示器的背景色。你可以随意改变它,瞧!编码愉快。

相关问题