Блог

Главная - Вопросы по программированию - React-Native: измените цвет значка в @react-navigation / material-bottom-tabs

React-Native: измените цвет значка в @react-navigation / material-bottom-tabs

#android #react-native #react-navigation

#Android #react-native #реагировать-навигация

Вопрос:

Могу ли я изменить цвет значка в 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>

...

Ответ №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>
  );
};
// ...

Комментарии:

1. Извините, но я забыл сказать, что я не использую NavigationContainer, просто только с const MainBottomTab = createMaterialBottomTabNavigator(); , есть ли какой-нибудь шанс сделать это таким образом?

2. Если я вложу эти два (NavigationContainer и MainBottomTab.Navigator), я должен передать этот реквизит independent={true} , потому что я получаю эту ошибку: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitely. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. , затем я попытался передать реквизит темы вместе и не сработал.

3. У вас должен быть 1 NavigationContainer , и поместите его в начало дерева компонентов. Поэтому убедитесь, что вы не отображаете 2 друг внутри друга, как указывает ошибка.

4. Это работа по изменению цвета вкладки, но текст внутри по умолчанию черный, как это изменить