如何在UI Kitten中修改BottomNavigationTab选中与未选中项的颜色

Hey there! Let's figure out how to customize the selected and unselected icon/text colors for your BottomNavigation in UI Kitten, given your dependency versions (@ui-kitten/components@4.4.1 and @eva-design/eva@1.4.0). There are two main approaches you can take:

1. Customize via Global Theme (Recommended) #

UI Kitten leans on the Eva Design System, so the cleanest way to apply consistent styles across your entire app is to override theme variables. Here's how to do it:

Step 1: Create a custom theme file #

Make a new file (e.g., theme.js) in your project, then extend the default light/dark theme with your desired colors:

import { light } from '@eva-design/eva';

export const customTheme = {
  ...light,
  // Option 1: Override global primary colors (affects other components too)
  'color-primary-500': '#2563EB', // Your selected state color
  'color-primary-100': '#94A3B8', // Your unselected state color
  
  // Option 2: Target BottomNavigation-specific variables for precise control
  'bottom-navigation-tab-text-color': '#94A3B8', // Unselected text color
  'bottom-navigation-tab-text-color-active': '#2563EB', // Selected text color
  'bottom-navigation-tab-icon-color': '#94A3B8', // Unselected icon color
  'bottom-navigation-tab-icon-color-active': '#2563EB', // Selected icon color
};

Step 2: Apply the custom theme in your root component #

Wrap your entire app with ApplicationProvider to make the custom theme available everywhere:

import { ApplicationProvider, IconRegistry } from '@ui-kitten/components';
import { EvaIconsPack } from '@ui-kitten/eva-icons';
import { customTheme } from './theme';
import YourMainComponent from './YourMainComponent'; // Replace with your actual root component

const App = () => (
  <>
    <IconRegistry icons={EvaIconsPack} />
    <ApplicationProvider theme={customTheme}>
      <YourMainComponent />
    </ApplicationProvider>
  </>
);

export default App;

This will automatically apply your custom colors to all BottomNavigation components in your app.

2. Local Style Overrides per Tab #

If you only need to tweak specific tabs instead of the entire app, use the built-in style props on each BottomNavigationTab:

import React from 'react';
import { Layout, BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
import { homeIcon, cartIcon, searchIcon, accountIcon, menuIcon } from './your-icon-file'; // Replace with your icon imports

const YourComponent = () => {
  const [selectedIndex, setSelectedIndex] = React.useState(0);

  const onSelect = (index) => {
    setSelectedIndex(index);
  };

  // Reuse styles for consistency across tabs
  const tabStyles = {
    style: { color: '#94A3B8' }, // Unselected text color
    activeStyle: { color: '#2563EB' }, // Selected text color
    iconStyle: { fill: '#94A3B8' }, // Unselected icon color (SVGs use fill)
    activeIconStyle: { fill: '#2563EB' }, // Selected icon color
  };

  return (
    <Layout>
      <BottomNavigation 
        indicatorStyle={styles.tabIndicator} // Keep your existing indicator style
        selectedIndex={selectedIndex} 
        onSelect={onSelect}
      >
        <BottomNavigationTab title='Home' icon={homeIcon} {...tabStyles} />
        <BottomNavigationTab title='Cart' icon={cartIcon} {...tabStyles} />
        <BottomNavigationTab title='Search' icon={searchIcon} {...tabStyles} />
        <BottomNavigationTab title='Account' icon={accountIcon} {...tabStyles} />
        <BottomNavigationTab title='More' icon={menuIcon} {...tabStyles} />
      </BottomNavigation>
    </Layout>
  );
};

export default YourComponent;

Quick Note #

Since UI Kitten icons are SVGs, we use the fill property to adjust their color, while text color uses the standard color property.

内容的提问来源于stack exchange，提问作者Sayan