如何使底部选项卡透明@react-navigation/bottom-tabs V6

Question

我正在使用@react-navigation/bottom-tabs V6。我正在尝试在底部设置透明背景。到目前为止，我无法弄清楚该怎么做。有任何想法吗？ 到目前为止的结果：

到目前为止的代码：

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
  
const theme = {
  colors: {
    background: "transparent",
  },
};

  <NavigationContainer theme={theme}>
    <Tab.Navigator
      screenOptions={{ headerShown: false }}
      tabBarOptions={{
        style: {
          backgroundColor: 'transparent',
          borderTopWidth: 0,
          elevation: 0,
        }
      }}
    >
      <Tab.Screen
        name="HomeNavigation"
        component={HomeNavigation}
        options={{
          tabBarLabel: "Home",
          tabBarIcon: ({ color, size }) => <Icon />,
        }}
      />
      <Tab.Screen name="Home" component={Home} />
    </Tab.Navigator>
  </NavigationContainer>

我怎样才能摆脱这个背景？

Answer 1

Tab.Navigator 没有名为 tabBarOptions 的道具。

screenOptions 中的 tabBarOptions。

你可以这样做 ->

    <NavigationContainer theme={theme}>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
          tabBarStyle: { backgroundColor: "transparent" },
        }}
      >
        <Tab.Screen
          name="HomeNavigation"
          component={HomeNavigation}
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color, size }) => <Icon />,
          }}
        />
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
    </NavigationContainer>

只需在 tabBarStyle 中添加 tabBarStyle 道具并设置样式

或者您可以像这样只为一个屏幕添加屏幕选项。

    <NavigationContainer theme={theme}>
      <Tab.Navigator
        screenOptions={{
          headerShown: false,
        }}
      >
        <Tab.Screen
          name="HomeNavigation"
          component={HomeNavigation}
          options={{
            tabBarLabel: "Home",
            tabBarIcon: ({ color, size }) => <Icon />,
            tabBarStyle:{backgroundColor:"transparent"}
          }}
        />
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
    </NavigationContainer>

Answer 2

好的，这就是解决方案

第一：

<Tab.Navigator
  screenOptions={{
    headerShown: false,
    tabBarStyle: {
      position: "absolute",
      left: 0,
      bottom: 0,
      elevation: 0,
      borderTopWidth: 0,
    },
  }}
>

这也必须添加到容器中：

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

<NavigationContainer theme={theme}>
   <BottomUserNavigation />
</NavigationContainer>