2023年如何設置Tab.Navigator的背景色？

Question

下面的代碼用於底部選項卡導航器，我如何更改它的顏色。 我嘗試了很多事情，比如使用樣式選項更改背景顏色嘗試了屏幕選項顏色但它不起作用我什至 activetint 顏色和其他但它只是圖標和所有：如果有人可以幫助我，我將不勝感激 :)

<Tab.Navigator initialRouteName='CustomerStack'
        
         screenOptions={({ route, }) => ({    
            
            tabBarIcon: ({ focused, color, size }) => {
                let iconName;
                let rn = route.name;
                if (rn === "CustomDrawer") {
                    iconName = focused ? 'home' : 'home'
                }
                else if (rn === "CustomerStack") {
                    iconName = focused ? 'home' : 'home'
                } 
                else if (rn === "Cart") {
                    iconName = focused ? 'shopping-cart' : 'shopping-cart'
                } else if (rn === "Account") {
                    iconName = focused ? 'user' : 'user'
                }
                return <User name={iconName} size={size} color={color} />
            },
        })}>

這是我試過的

<Tab.Navigator
    tabBarOptions={{
      activeTintColor: '#e91e63',
      style: {
        backgroundColor: 'orange',
      },
    }}
  >
    <Tab.Screen name="Home" component={HomeScreen} />
    <Tab.Screen name="Profile" component={ProfileScreen} />
  </Tab.Navigator>

Answer 1

以這種方式嘗試：

<Tab.Navigator
        screenOptions={{
          tabBarStyle: {
            backgroundColor: 'orange',
          },
        }}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
      </Tab.Navigator>

Answer 2

根據新的官方文檔，您可以檢查以下代碼：

<Tab.Navigator
      initialRouteName="Feed"
      activeColor="white"
      labelStyle={{ fontSize: 12 }}
      shifting={true}
      labeled={true}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: 'red',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: 'Updates',
           tabBarColor: 'blue',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="bell" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: 'green',
          tabBarIcon: ({ color }) => (
            <MaterialCommunityIcons name="account" color={color} size={26} />
          ),
        }}
        
      />
    </Tab.Navigator>

Answer 3

像下面這樣設置 Tab.Navigator 的背景顏色，你也可以設置 tabBarActiveTintColor 和 tabBarInactiveTintColor 所以不需要在特定組件上設置 tintcolor：

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator screenOptions={{
          tabBarStyle: {
            backgroundColor: 'orange',
          },
          tabBarActiveTintColor: 'red',
          tabBarInactiveTintColor: 'green',
        }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}