如何让react-native的react-navigation标签栏透明

Question

有没有办法让标签栏透明？我尝试了以下方法，但它只显示白色背景。我需要实现自己的 tabBarComponent 吗？如果是这样，是否有关于该类的任何文档以及我需要实现什么接口？

const MainTabNavigator = TabNavigator(
  {
    MessageCenter: { screen: MessageCenterStack },
    Camera: { screen: CameraStack },
  },
  {
    tabBarPosition: 'bottom',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions: {
      style: {
        backgroundColor:  'transparent',
      },
    }
  }
);

Answer 1

我必须设置位置

absolute

并给它一个左右和下的背景颜色透明才能生效。

tabBarOptions: {
  showIcon: true,
  showLabel: false,
  lazyLoad: true,
  style: {
    backgroundColor: 'transparent',
    borderTopWidth: 0,
    position: 'absolute',
    left: 50,
    right: 50,
    bottom: 20,
    height: 100
  }
}

Answer 2

我终于通过为自定义选项卡栏组件添加容器视图并使容器绝对定位并保持选项卡栏不变，使其在 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',
}

最后的结果

Answer 3

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,
        },
      }}>

这是输出屏幕截图。

Answer 4

这里的很多答案对于这个问题来说似乎有点令人费解。因此，对于其他寻求如何操作的人来说，这里有一个简单的答案：

在选项卡栏选项中将位置更改为绝对并将背景颜色更改为透明，使其看起来像：

tabBarOptions: {
  style: {
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    bottom: 0,
    right: 0
  }
}

Answer 5

这就是我为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,
     ...
   }
 })
} 

它没有按预期工作

Answer 6

对于 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>

Answer 7

Mohammed Tawfik 的答案对我有用，但我必须从

<BottomTabBar>

导入

react-navigation-tabs

组件，而不是建议的

react-navigation

。

Answer 8

在 React Navigation v5 中

tabBarOptions={{
        style: {
          borderTopWidth: 0,
          backgroundColor: 'transparent',
          elevation: 0, // this solved the triangle type view problem in android
        },
      }}>

Answer 9

首先，应用“绝对”位置，然后使用如下背景颜色：-

tabBarStyle: {
              position: 'absolute',
              backgroundColor: 'rgba(0, 0, 0, 0.9)',      
              height: 90,
            },

Answer 10

实际上，它是从

NavigationContainer

主题backgroundColor获取颜色的，你可以像这样给

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>

Answer 11

解决方案很简单，考虑将所有组件渲染放置在应用程序中，

1. header：导航标题
2. body：应用内容
3. 页脚：标签栏

在应用程序内，上述所有三个组件都有自己特定的位置来逐一渲染，例如相对位置（默认）。

并且您想要显示正文的选项卡栏顶部（忽略其位置和放置），那么您必须通过样式 tabbarOption "position: 'absolute'"， 将其置于正文顶部 现在它可以工作了，但是出现了一个新问题，由于位置绝对主体一直位于底部，并且一些主体内容隐藏在选项卡栏后面 要解决这个问题，需要添加填充或根据底部选项卡栏添加一些具有一定高度的虚拟对象在所有主体屏幕内。