我在我的React Native项目中使用React Navigations tabBar,我不知道如何正确更改底部选项卡栏的背景颜色。我使用Expo制作了我的应用程序,我还编辑了app.json以获得正确的backgroundColor,但没有任何变化。下面是我的代码:
function MyTabs() {
return (
<Tab.Navigator
initialRouteName="Feed"
screenOptions={{
tabBarActiveTintColor: "#E40066",
tabBarInactiveTintColor: "#fff",
tabBarActiveBackgroundColor: "#171717",
tabBarInactiveBackgroundColor: "#171717",
headerShown: false,
tabBarStyle: {
borderWidth: 1,
},
style: {
backgroundColor: "#171717",
},
}}
>
<Tab.Screen
name="Home"
component={Home}
options={{
tabBarLabel: "Home",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons
name="glass-cocktail"
color={color}
size={size}
/>
),
}}
/>
<Tab.Screen
name="Search"
component={Search}
options={{
tabBarLabel: "Search",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="magnify" color={color} size={size} />
),
}}
/>
<Tab.Screen
name="Saved"
component={Saved}
options={{
tabBarLabel: "Saved",
tabBarIcon: ({ color, size }) => (
<MaterialCommunityIcons name="heart" color={color} size={size} />
),
}}
/>
</Tab.Navigator>
);
}
export default function App() {
const navTheme = {
...DefaultTheme,
colors: {
...DefaultTheme.colors,
background: "#171717",
},
};
return (
<NavigationContainer theme={navTheme}>
<MyTabs style={{ backgroundColor: "#171717" }}></MyTabs>
</NavigationContainer>
);
}
然而我的tabBar看起来像this,我希望它是#171717,而不是白色...先谢谢你了
3条答案
按热度按时间js5cn81o1#
解决方案是制作一个主题来改变背景颜色:
3qpi33ja2#
你可以用这个
z8dt9xmd3#
您使用以下代码设置标签屏幕中的背景颜色,这是错误的
请使用下面的代码设置背景颜色
希望这能解决你的问题