React-Native 如何更改聚焦的其他选项卡上选项卡栏的整体背景颜色

Question

我想更改标签栏背景颜色。

我的底部导航有 5 个选项卡。首先，当我触摸主页选项卡时。当我触摸其他（四个）选项卡时，我想将选项卡栏的背景颜色更改为“透明”。我想将选项卡栏的背景颜色更改为“白色”，我也想通过其他选项卡更改 activeTintColor 。

这是我的代码和屏幕截图（我想制作这个屏幕截图）。

现在是我的主屏幕。主屏幕截图

我想要另一个屏幕。截屏

import { View } from 'react-native';

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

import MyHomeStack from './HomeStack';
import MyProfileStack from './ProfileStack';

import InformScreen from '../screens/InformScreen';
import SearchScreen from '../screens/SearchScreen';
import UploadScreen from '../screens/UploadScreen';

import CustomIcon from '../components/CustomIcon';

const Tab = createBottomTabNavigator();

function MainTabStack(){
  return (
    <Tab.Navigator
      initialRouteName="Home"
      labelStyle={{ fontSize: 12 }}
      tabBarOptions={{
        style: {
          height: '9%',
          backgroundColor: 'transparent',
          position:'absolute',
          bottom:0,
          elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
      }}>
      <Tab.Screen
        name="Home"
        component={MyHomeStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_home" color={color} size={size}/>
          )
        }}
      />
      <Tab.Screen
        name="Search"
        component={SearchScreen}
        options={{
          tabBarColor:'red',

          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_store" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Upload"
        component={UploadScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_upload" color={color} size={28} />
          ),
        }}
        listeners={({ navigation }) => ({
          tabPress: event => {
            event.preventDefault();
            navigation.navigate('UploadScreen');
          },
        })}
      />
      <Tab.Screen
        name="Inform"
        component={InformScreen}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="nav_closet" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="mypage"
        component={MyProfileStack}
        options={{
          tabBarIcon: ({ color, size }) => (
            <CustomIcon name="mypage" color={color} size={size} />
          ),
        }}
      />


    </Tab.Navigator>
  );
}

export default MainTabStack;

Answer 1

在选项卡栏选项中，您是否尝试过动态地将背景颜色更改为您想要的选择颜色。

constructor(props){
    this.tabIndex=0;
} 

<Tab.Navigator
    initialRouteName="Home"
    labelStyle={{ fontSize: 12 }}
    screenOptions={({ route }) => ({
        if (route.name === 'Home') {
          this.tabIndex=4;
        } else if (route.name === 'Settings') {
          this.tabIndex=5;
        }
    })}
    tabBarOptions={{
        style: {
        height: '9%',
        backgroundColor: this.tabIndex==4?"#fff":"transparent",
        //backgroundColor: 'transparent',
        position:'absolute',
        bottom:0,
        elevation:0
        },
        activeTintColor: '#000000',
        showLabel: false,
    }}>
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>