如何设置选项卡的背景颜色.2023年的航海家?

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

设置制表符的背景色。你也可以设置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>
);
}