如何在反应导航 v6 中删除标签栏的背景？答案

【问题标题】：How do I remove the background of a Tab Bar in react nativegation v6?如何在反应导航 v6 中删除标签栏的背景？
【发布时间】：2022-01-12 23:31:47
【问题描述】：

I applied borderTopLefRadius and borderTopRightRadius: So this is the result of my custom tab navigator, but I want to remove that white background color, but I don´t know how

这是我的代码：

        <Tabs.Navigator screenOptions={{
            headerShown: false,
            tabBarStyle: {
                borderTopRightRadius: 15,
                borderTopLeftRadius: 15,
                height: 60,
            },                  
        }}>

【问题讨论】：

标签： react-native tabs react-native-navigation

【解决方案1】：

尝试在 NavigationContainer 中添加具有透明背景的主题：

<NavigationContainer theme={navigationTheme}>
  <Tab.Navigator screenOptions={{
    headerShown: false,
    tabBarStyle: {
      borderTopRightRadius: 15,
      borderTopLeftRadius: 15,
      height: 60,
      },                  
    }}
  >
  {/* screens */}
  </Tab.Navigator>
</NavigationContainer>

const navigationTheme = {
  colors: {
    background: "transparent",
  },
};

【讨论】：

【解决方案2】：

我已经找到了解决办法：

    <Tabs.Navigator
        screenOptions={{
            headerShown: false,
            tabBarStyle: styles.tab,
            tabBarLabelStyle: styles.label,
        }}
        sceneContainerStyle={{ backgroundColor: colors.background }}
    >

【讨论】：