有没有办法让标签栏透明？我尝试了以下方法，但它只显示了白色背景。我需要实现自己的 tabBarComponent 吗？如果是这样，是否有关于该类的任何文档以及我需要实现什么接口？
const MainTabNavigator = TabNavigator(
{
MessageCenter: { screen: MessageCenterStack },
Camera: { screen: CameraStack },
},
{
tabBarPosition: 'bottom',
swipeEnabled: true,
animationEnabled: true,
tabBarOptions: {
style: {
backgroundColor: 'transparent',
},
}
}
);
【问题讨论】：
标签： react-native react-navigation
我必须设置位置absolute 并给它一个左右和底部以使其背景颜色透明生效。
tabBarOptions: {
showIcon: true,
showLabel: false,
lazyLoad: true,
style: {
backgroundColor: 'transparent',
borderTopWidth: 0,
position: 'absolute',
left: 50,
right: 50,
bottom: 20,
height: 100
}
}
【讨论】：
我终于让它在 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',
}
以及最终结果
【讨论】：
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,
},
}}>
【讨论】：
对于这个问题，这里的很多答案似乎有点令人费解。因此，对于其他寻找如何做到这一点的人，这里有一个简单的答案：
在标签栏选项中，将位置更改为绝对，将背景颜色更改为透明，如下所示：
tabBarOptions: {
style: {
backgroundColor: 'transparent',
position: 'absolute',
left: 0,
bottom: 0,
right: 0
}
}
【讨论】：
对于 React Navigation v6，您需要在 TabNavigator 上设置 screenOptions。 （我将它与自定义/透明底部标签栏结合使用）。
import {
BottomTabBar,
createBottomTabNavigator,
} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();
<Tab.Navigator
screenOptions={{
tabBarStyle: {backgroundColor: 'blue'},
}}
tabBar={props => {
return (
<View>
<BottomTabBar {...props} />
</View>
);
}}
initialRouteName={SCREEN_NAMES.APP.HOME_TAB}
...
</Tab.Navigator>
【讨论】：
Mohammed Tawfik 的回答对我有用，但我必须从 react-navigation-tabs 导入 <BottomTabBar>component 而不是建议的 react-navigation。
【讨论】：
实际上，它的颜色来自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>
【讨论】：
在 React Navigation v5 中
tabBarOptions={{
style: {
borderTopWidth: 0,
backgroundColor: 'transparent',
elevation: 0, // this solved the triangle type view problem in android
},
}}>
【讨论】：
这就是我为 react-navigation v6 解决这个问题的方法
import {
createBottomTabNavigator,
BottomTabBar,
} from '@react-navigation/bottom-tabs';
我们需要使用BottomTabBar来自定义布局并使其透明
const Tab = createBottomTabNavigator();
<Tab.Navigator
// Here under tabBar we customize the view and set the bg to transparent
tabBar={props => (
<View style={{ backgroundColor: 'transparent', position: 'absolute', left: 0, bottom: 0, right: 0 }}>
<BottomTabBar {...props} />
</View>
)}>
...
如果你这样做
screenOptions={({ route }) => ({
tabBarStyle:{
position:absolute,
...
}
})
}
它不像预期的那样工作
【讨论】：
解决方案很简单，考虑所有组件渲染放在应用内，
在应用程序中，上述所有三个组件都有自己的特定位置来逐个渲染，例如相对位置（默认）。
以及你想在哪里显示标签栏顶部（忽略它的位置和放置），那么你必须通过设置 tabbarOption "position: 'absolute'", 将它带到 body 顶部 现在它正在工作，但出现了一个新问题，由于位置绝对正文一直位于底部，并且一些正文内容隐藏在标签栏后面 解决需要添加填充或根据底部标签栏添加一些高度的虚拟对象在所有正文屏幕内。
【讨论】：