Reactjs MaterialBottomTabNavigator/React Native/React导航

我使用的材料底部标签导航，并希望得到一个透明的酒吧背景，但我的结果看起来像这样

从“React”导入React；
从“反应导航材料底部选项卡”导入{createMaterialBottomTabNavigator}；
从“反应本机矢量图标/羽毛”导入图标；
从“../components/whatsOn/HomePage”导入主页；
从“../components/ComingSoon/ComingSoon”导入ComingSoon；
从“../components/Favorites/Favorites”导入收藏夹；
从“../static/config.json”导入配置；
从“../static/text.json”导入文本；
const{gradient}=config.colors；
const{comingsoontile，HomeTitle，FavoriteStitle}=text.Tabs；
const lang=config.language；
export const TabStack=createMaterialBottomTabNavigator({
即将到来：{
荧屏：很快就会出现，
activeTintColor:gradient.primary，
导航选项：{
tabBarColor:'透明'，
tabBarLabel:ComingSoonTitle[lang]，
tabBarIcon:（{tintColor}）=>（），
},
},
whatsOn：{
屏幕：主页，
activeTintColor:gradient.primary，
导航选项：{
tabBarColor:'透明'，
tabBarLabel:HomeTitle[lang]，
tabBarIcon:（{tintColor}）=>（），
},
},
最爱：{
屏幕：最爱，
activeTintColor:gradient.primary，
导航选项：{
tabBarColor:'透明'，
tabBarLabel:FavoriteStitle[lang]，
tabBarIcon:（{tintColor}）=>（），
},
},
}, {
是的，
initialRouteName:“whatsOn”，
订单：[“即将到来”，“whatsOn”，“Favorites”]，
tabBarPosition:'底部'，
});

此选项卡堆栈嵌套在此堆栈中：

export const HomeStack = createStackNavigator({
  Tabs: {
    screen: TabStack,
    navigationOptions: {
      title: 'Compeso',
      header: props => <CustomHeader {...props} />,
      headerStyle: {
        backgroundColor: 'transparent',
      },
      headerTitleStyle: {
        fontSize: 24,
        fontWeight: '500',
        color: colors.typography,
      },
      headerRight: MenuIcon,
      headerLeft: SearchIcon,
      animationEnabled: true,
    },
  },
  Drawer: {
    screen: MoreInfromation,
  },
}, {
  initialRouteName: 'Tabs',
  cardStyle: { backgroundColor: 'transparent' },
});

export const HomeStack=createStackNavigator({
选项卡：{
屏幕：TabStack，
导航选项：{
标题:"Compeso",，
标题：道具=>,，
头型：{
背景色：“透明”，
},
头饰样式：{
尺寸：24，
容重：“500”，
颜色：颜色，排版，
},
头灯：美纽康，
标题左：搜索图标，
animationEnabled：没错，
},
},
出票人：{
屏幕：更多信息，
},
}, {
initialRouteName:“制表符”，
卡片样式：{backgroundColor:'transparent'}，
});

HomeStack嵌套在switchNavigator中

export default class Router extends Component {
  render() {
    return (
       <MainStack />
    );
  }
}

const MainStack = createSwitchNavigator({
  Auth: LoginStack,
  Home: HomeStack,
},
{
  initialRouteName: 'Home',
});

导出默认类路由器扩展组件{
render（）{
返回(
);
}
}
const MainStack=createSwitchNavigator({
Auth:LoginStack，
家：家装，
},
{
initialRouteName:“主页”，
});

正在my App.js中渲染此主堆栈

我将这个选项卡导航器放入堆栈导航器中，显示的每个组件都会显示一个高度为815像素的滚动视图，以确保背景位于条的后面

有人能给我一些建议吗？

---

提前感谢

您需要包括

barStyle

。 因此，对于透明，样式如下所示：

barStyle: {backgroundColor:'transparent'}

在您的代码中，它看起来像这样（包含在底部）

---

谢谢你的帮助！不幸的是，它仍然是相同的。您将哪个组件设置为黑色？我相信另一个组件或

root

组件是灰色的。否则，这应该是透明的。我测试了它，它对我有效。你知道如果我在node_modules/react native material bottom tabs/views/BottomTabBar.js中更改样式表会发生什么吗？const styles=stylesheet.create（{tabBar:{backgroundColor:'#F7F7F7'，//iOS 10中的默认背景色borderTopWidth:stylesheet.hairlineWidth，borderTopColor:'rgba（0,0,0,3），flexDirection:'row'}，这是不可取的，无论何时更新

react navigation

它都将重置。此外，如果您转移项目，您将不会包含

节点模块

您将它们放在

包中。json

然后您将

纱线安装

。这意味着您将不会拥有自定义样式。

barStyle: {backgroundColor:'transparent'}

export const TabStack = createMaterialBottomTabNavigator({
  comingSoon: {
    ...
  },
  ...
}, {
  shifting: true,
  initialRouteName: 'whatsOn',
  order: ['comingSoon', 'whatsOn', 'favourites'],
  tabBarPosition: 'bottom',
  barStyle: {backgroundColor:'transparent'}
});