React Native Navigation v2如何修改选中底部标签的背景色

Hey there! I see you're trying to set the selected bottom tab's background color in React Native Navigation v2, and you've added selectedBackgroundColor: 'red' to your config. Let me help you get this working properly.

The issue here is that React Native Navigation v2's default bottom tab component doesn't support the selectedBackgroundColor property directly in the bottomTab options. So that line you added won't take effect out of the box. Instead, we need to create a custom tab bar component to handle this styling.

Step 1: Create a Custom Tab Bar Component #

First, let's build a custom tab bar that lets us control the background color of selected tabs. Create a new file (e.g., CustomTabBar.js) with this code:

import React from 'react';
import { View, TouchableOpacity, Text, Image, StyleSheet } from 'react-native';
// Make sure to import your color and font utilities here
import { getColorTheme } from './path-to-your-color-utils';
import { FONTFAMILY, FONTSIZE } from './path-to-your-font-constants';

const CustomTabBar = ({ tabs, selectedTabIndex, onTabSelect }) => {
  return (
    <View style={styles.tabBarContainer}>
      {tabs.map((tab, index) => {
        const isSelected = index === selectedTabIndex;
        return (
          <TouchableOpacity
            key={index}
            style={[
              styles.tabItem,
              isSelected && styles.selectedTabItem // Apply selected background when active
            ]}
            onPress={() => onTabSelect(index)}
          >
            {/* Tab Icon */}
            <Image
              source={tab.icon}
              style={[
                styles.tabIcon,
                { 
                  tintColor: isSelected 
                    ? getColorTheme("ORANGE", "LIGHT") 
                    : getColorTheme("SECONDARY", "LIGHT") 
                }
              ]}
            />
            {/* Tab Text */}
            <Text
              style={[
                styles.tabText,
                {
                  color: isSelected 
                    ? getColorTheme("ORANGE", "LIGHT") 
                    : getColorTheme("SECONDARY", "LIGHT"),
                  fontFamily: FONTFAMILY.SEMIBOLD,
                  fontSize: FONTSIZE.FONT_12
                }
              ]}
            >
              {tab.text}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    backgroundColor: '#ffffff', // Default background color for the entire tab bar
    borderTopWidth: 1,
    borderTopColor: '#eeeeee',
    elevation: 4 // Add shadow for Android
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 8
  },
  selectedTabItem: {
    backgroundColor: 'red' // This is your selected tab background color
  },
  tabIcon: {
    width: 24,
    height: 24,
    marginBottom: 4
  },
  tabText: {
    fontSize: FONTSIZE.FONT_12
  }
});

export default CustomTabBar;

Step 2: Use the Custom Tab Bar in Your Navigation Config #

Now, update your navigation root setup to use this custom tab bar instead of the default one:

import Navigation from 'react-native-navigation';
import CustomTabBar from './CustomTabBar';

// Set up your navigation root
Navigation.setRoot({
  root: {
    bottomTabs: {
      options: {
        tabBarComponent: CustomTabBar // Tell RNN to use our custom component
      },
      children: [
        // Your screen stacks go here (example below)
        {
          stack: {
            children: [{ screen: 'HomeScreen' }],
            options: {
              bottomTab: {
                icon: require('./assets/home-icon.png'),
                text: 'Home'
              }
            }
          }
        },
        {
          stack: {
            children: [{ screen: 'ProfileScreen' }],
            options: {
              bottomTab: {
                icon: require('./assets/profile-icon.png'),
                text: 'Profile'
              }
            }
          }
        }
        // Add more tabs as needed
      ]
    }
  }
});

Key Notes #

• Make sure to update the import paths for your color utilities and font constants to match your project structure.
• You can adjust the selectedTabItem style in CustomTabBar.js to change the background color (swap 'red' with any color value you need).
• This custom component replicates all the styling you had in your original config (text colors, fonts, icon tints) while adding the selected background color functionality.

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