有没有办法让标签栏透明?我尝试了以下但它只显示了白色背景。我需要实现自己的tabBarComponent吗?如果是的话,是否有关于该类的文档以及我需要实现的接口?
const MainTabNavigator = TabNavigator(
{
MessageCenter: { screen: MessageCenterStack },
Camera: { screen: CameraStack },
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
style: {
backgroundColor: 'transparent',
},
}
}
);
答案 0 :(得分:8)
我必须设置位置absolute
并为其左右两侧设置backgroundColor透明才能生效。
tabBarOptions: {
showIcon: true,
showLabel: false,
lazyLoad: true,
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
position: 'absolute',
left: 50,
right: 50,
bottom: 20,
height: 100
}
}
答案 1 :(得分:3)
这里的许多答案似乎有点让人困惑。因此,对于其他寻求该方法的人来说,这是一个简单的答案:
在选项卡栏中,选项将位置更改为绝对颜色,将背景颜色更改为透明颜色,如下所示:
tabBarOptions: {
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}
}
答案 2 :(得分:1)
通过为自定义标签栏组件添加容器视图,并使容器绝对定位并使标签栏保持原样,我终于在Android和ios上使它工作了
这是自定义标签栏组件
const TabBarComponent = (props) => (<BottomTabBar {...props} />)
以下是标签栏选项
{
tabBarComponent: props => {
return (
<View style={{
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
}}>
<TabBarComponent {...props} />
</View>
)
},
tabBarOptions: {
style: {
borderTopWidth: 0,
backgroundColor: '#FFFFFF',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
height: 55,
paddingBottom: 5,
}
},
initialRouteName: 'HomeScreen',
}
最终结果
答案 3 :(得分:1)
position:'absolute'是解决这个问题的方法,但是您可能会注意到它在android方面看起来并不完美,但是在android方面却可以完美地工作。
最后,经过长时间的努力,我找到了解决方案。
海拔:0
在标签栏样式中对此进行设置将解决此问题。
示例-
tabBarOptions={{
showIcon: true,
showLabel: true,
activeTintColor: COLORS.tabSelected,
inactiveTintColor: COLORS.tabNormal,
style: {
backgroundColor:'transparent',
borderTopWidth: 0,
position: 'absolute',
elevation: 0 // <-- this is the solution
},
labelStyle: {
fontSize: 12,
},
}}>
答案 4 :(得分:0)
Mohammed Tawfik的答案对我有用,但是我不得不从<BottomTabBar>
导入react-navigation-tabs
组件,而不是建议的react-navigation
。
答案 5 :(得分:0)
实际上,它是从 NavigationContainer
主题背景颜色获取颜色的,您可以像这样为 NavigationContainer
提供透明颜色
import { NavigationContainer } from "@react-navigation/native";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
const Tab = createBottomTabNavigator();
const theme = { //like this
colors: {
background: "transparent",
},
};
<NavigationContainer theme={theme}>
<Tab.Navigator>
<Tab.Screen component={ComponentA} name="A" />
<Tab.Screen component={ComponentB} name="B" />
</Tab.Navigator>
</NavigationContainer>
答案 6 :(得分:0)
在 React Navigation v5 中
tabBarOptions={{
style: {
borderTopWidth: 0,
backgroundColor: 'transparent',
elevation: 0, // this solved the triangle type view problem in android
},
}}>