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

洛根

我可以在材料底部标签中更改徽章的颜色吗?因为默认情况下它已经是红色了,所以我想更改它。如果有可能,我该怎么做?

...

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>

...

巴斯·范·德·林登

您可以通过覆盖默认主题来做到这一点,如下所示:

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>
  );
};
// ...

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React Native的React-Navigation:在TabNavigator的Tab中添加徽章

如何弯曲react-navigation-material-bottom-tabs的顶部两个角?

使用 react-native-ionicons 和 material-bottom-tabs 不显示 react native 图标(用十字显示)

React Native,React-Navigation

React Native,更改React Navigation标头样式

如何在react-native中添加react-navigation?

React Native:设置 React Navigation 的屏幕标题

React Native Context API react-navigation

React Native 固定页脚与 React Navigation

在iOS上的react-native-material-dropdown中编辑下划线颜色,而无需更改箭头和标签颜色

如何在React Native React Navigation 5中为标题后退按钮的颜色设置动画?

在 React Native 中更改 TouchableOpacity 的颜色

在React Native Navigation中的标签中隐藏标签

Border Radius Bottom Bug React Native

在 Wix React Native Navigation 中从 SingleScreen 推送到 TabBased

React Native Navigation 5中的自定义图像

React Native Navigation Drawer-打开页面不在抽屉中

在react-navigation中在goBack上反应Native Pass属性?

如何在react-native-navigation中从堆栈完成SplashScreen

在React Native Navigation中为onPress指定名称或键

使用 @react-navigation/native 中的 StackScreen 选项

react-native-navigation 在 componentDidMount 中获取参数

this.props.navigation 在 React Native 中不起作用

在react-native-material-dropdown中删除边框底部

由@ react-navigation / bottom-tabs 5.x引起的启动错误

@react-navigation/bottom-tabs 总是得到未定义的组件

React Native Navigation TopBar 图标未显示

等价于React Native Navigation的动态查询参数?

React Native Navigation:在屏幕之间传递数据