[英]How to set the background color of Tab.Navigator in 2023?
下面的代码用于底部选项卡导航器,我如何更改它的颜色。 我尝试了很多事情,比如使用样式选项更改背景颜色尝试了屏幕选项颜色但它不起作用我什至 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>
以这种方式尝试:
<Tab.Navigator
screenOptions={{
tabBarStyle: {
backgroundColor: 'orange',
},
}}>
<Tab.Screen name="Home" component={HomeScreen} />
<Tab.Screen name="Profile" component={ProfileScreen} />
</Tab.Navigator>
根据新的官方文档,您可以检查以下代码:
<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>
像下面这样设置 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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.