如何在react native中删除材料底部标签的背景颜色

Question

我用

@ react-navigation / material-bottom-tabs

如何去除橙色背景色或使其变为透明。

所以感觉就像漂浮

租用我的代码

const MainTabScreen = () => (
<Tab.Navigator
  initialRouteName="Home"
  activeColor="#e9118c"
  inactiveColor="#95a5a6"
  shifting={true}
  sceneAnimationEnabled={true}
  tabBarBadge={true}
  style={{ 
    backgroundColor: 'tomato',
   //backgroundColor: 'transparent',
   //opacity:0.7
  }}
  barStyle={{ 
    backgroundColor:'#fff',
    borderRadius:50,
    marginBottom:10,
    marginTop:5,
    paddingHorizontal:12,
    paddingTop:12,
    height:80,
    borderColor:'#fff',
    marginHorizontal:5
  }}
>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({ color }) => (
        <Icon name="ios-home" color={color} size={26} />
      ),
    }}
  />
</Tab.Navigator>

）;

Answer 1

您必须在如下所示的条形中使用position：'absolute'，而无需使用这些样式。

     barStyle={{
        backgroundColor: '#fff',
        borderRadius: 50,
        marginBottom: 10,
        marginTop: 5,
        paddingHorizontal: 12,
        paddingTop: 12,
        height: 80,
        borderColor: '#fff',
        marginHorizontal: 5, 
        position: "absolute",
      }}>