MaterialBottomTabNavigator / React-Native / React Navigation

Question

я использую Material-Bottom-Tab-Navigatior и хотел бы получить прозрачный фон бара, однако мой результат выглядит так: Это код

import React from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import Icon from 'react-native-vector-icons/Feather';

import HomePage from '../components/whatsOn/HomePage';
import ComingSoon from '../components/comingSoon/ComingSoon';
import Favourites from '../components/favourites/Favourites';

import config from '../static/config.json';
import texts from '../static/texts.json';

const { gradient } = config.colors;
const { ComingSoonTitle, HomeTitle, FavouritesTitle } = texts.Tabs;
const lang = config.language;

export const TabStack = createMaterialBottomTabNavigator({
  comingSoon: {
    screen: ComingSoon,
    activeTintColor: gradient.primary,
    navigationOptions: {
      tabBarColor: 'transparent',
      tabBarLabel: ComingSoonTitle[lang],
      tabBarIcon: ({ tintColor }) => (<Icon name="calendar" color={tintColor} size={24} />),
    },
  },
  whatsOn: {
    screen: HomePage,
    activeTintColor: gradient.primary,
    navigationOptions: {
      tabBarColor: 'transparent',
      tabBarLabel: HomeTitle[lang],
      tabBarIcon: ({ tintColor }) => (<Icon name="film" color={tintColor} size={24} />),
    },
  },
  favourites: {
    screen: Favourites,
    activeTintColor: gradient.primary,
    navigationOptions: {
      tabBarColor: 'transparent',
      tabBarLabel: FavouritesTitle[lang],
      tabBarIcon: ({ tintColor }) => (<Icon name="star" color={tintColor} size={24} />),
    },
  },
}, {
  shifting: true,
  initialRouteName: 'whatsOn',
  order: ['comingSoon', 'whatsOn', 'favourites'],
  tabBarPosition: 'bottom',
});

this TabStackвложен в этот стек:

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' },
});

HomeStack вложен в switchNavigator

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

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

Этот MainStack отображается в моем App.js

Я положил этоНавигатор вкладки в навигатор стека, и каждый компонент, который отображается, показывает представление прокрутки с высотой 815 пикселей, чтобы убедиться, что фон находится за полосой.

Кто-то может посоветовать?Заранее спасибо

Answer 1

Вам необходимо включить barStyle.Итак, для прозрачного стиль будет выглядеть примерно так:

barStyle: {backgroundColor:'transparent'}

В вашем коде он будет выглядеть примерно так (включен внизу).

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