如何使react-native react-navigation选项卡栏透明

时间:2018-04-23 19:21:18

标签: react-native react-navigation

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

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

7 个答案:

答案 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',
}

最终结果

Transparent tab bar with border radius

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

这是输出屏幕截图。 Before set "elevation: 0", it was looking like this

After set "elevation: 0", it's looking perfect

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