React-Native：在 @react-navigation/material-bottom-tabs 中更改徽章颜色

Question

我可以更改材料底部标签中徽章的颜色吗？因为默认情况下它已经是红色的，我需要更改它。如果可以，我该怎么做？

...

import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';

...
const MainBottomTab = createMaterialBottomTabNavigator();

...

    <MainBottomTab.Navigator
      initialRouteName="Home"
      activeColor="#C9C9C9"
      inactiveColor="#4523AF"
      barStyle={styles.menuBotao}>
...
      <MainBottomTab.Screen
        name="Publicações"
        component={PublicacaoNavication}
        options={{
          tabBarLabel: '',
          tabBarBadge: notificacoes !== undefined ? notificacoes.length : false, <-- I need to change the color
          tabBarIcon: ({color}) => <Icon name={'filing'} color={color} />,
        }}
      />

...

</MainBottomTab.Navigator>

...

Answer 1

您可以像这样覆盖默认主题：

import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

// Create your custom theme and override the notification color
const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    notification: 'blue',
  },
};

// Pass your theme to the PaperProvider wrapping your app
const App = () => {
  return (
    <PaperProvider theme={MyTheme}>
      <NavigationContainer>
        // The rest of your content...
      </NavigationContainer>
    </PaperProvider>
  );
};
// ...