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

Question

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

我在底部导航栏上有 5 个标签。首先，当我触摸主页选项卡时。我想把 Tabbar 的背景色改成 'transparent' 第二，当我触摸其他（四）标签时。我想把 Tabbar 的背景色改成 'white' 我也想通过其他选项卡更改 activeTintColor。

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

Now my home screen. Home Screen shot

I want this other screen. screen shot


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>

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

React-Native How to change the overall background color of the Tabbar on the focused other tabs

react-native

react-native-navigation

react-navigation-bottom-tab