如何使用底部选项卡导航处理SafeArea的背景色？
如何使用底部选项卡导航处理SafeArea的背景色？
提问于 2020-03-06 09:59:50
电流行为
大家好，
我想设置底部标签的背景色。所以我做了下面的事。
<Tab.Navigator
tabBarOptions={{
activeTintColor: '#FF0000',
activeBackgroundColor: '#FFFFFF',
inactiveBackgroundColor: '#FF0000',
inactiveTintColor: '#FFFFFF'
}}>
<Tab.Screen
name="Home"
component={HomeScreen}
/>
<Tab.Screen
name="Account"
component={AccountScreen}
/>
</Tab.Navigator>
问题是SafeArea有一个白色的背景
期望行为
我期望的是
那么你能告诉我如何解决反应导航版本5中的这个问题吗？谢谢!
您的环境
iOS react原生: 0.61.5
@react导航/本机：^5.0.5
@react导航/底部-选项卡：^5.0.5
回答 4
Stack Overflow用户
发布于 2020-12-09 13:40:39
我刚设置了backgroundColor
<Tab.Navigator
initialRouteName="Stack_Main"
tabBarOptions={{
style: {
backgroundColor: "#FF0000",
},
}}
>Stack Overflow用户
发布于 2021-09-01 18:05:36
screenOptions={({route}) => ({
tabBarStyle: {backgroundColor: '#436332', borderTopColor: '#23321A'},
tabBarLabelStyle: {
fontWeight: '600',
fontSize: 12,
},
tabBarActiveTintColor: '#f1c522',
tabBarInactiveTintColor: '#f4f1de',
tabBarActiveBackgroundColor: '#436332',
tabBarInactiveBackgroundColor: '#436332',
})}Stack Overflow用户
发布于 2020-03-31 07:46:22
我在这个答案中找到了一个选项(我不喜欢，但它有效)：How do you make the react-native react-navigation tab bar transparent
<Tab.Navigator
tabBarOptions={{
showLabel: false,
activeTintColor: theme.primary,
inactiveTintColor: theme.tintInactiveTabBar,
style: {
backgroundColor: theme.backgroundTabBar,
position: 'absolute',
left: 0,
bottom: 0,
right: 0,
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
},
}}>...</Tab.Navigator>
放置位置:绝对属性和底部属性，左属性和右属性。对我来说很管用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60561666
复制相关文章
相似问题
腾讯云开发者
