Блог

Главная - Вопросы по программированию - Каким-либо образом пользовательская панель вкладок имеет прозрачный фон?

Каким-либо образом пользовательская панель вкладок имеет прозрачный фон?

#reactjs #react-native #react-navigation

#reactjs #react-native #реакция-навигация

Вопрос:

Я пытаюсь создать нижнюю панель вкладок с прозрачной навигацией по реакции.

Я использую «tabBarComponent: » BottomTabNavigatorConfig. и фон MyCustomTabBar прозрачный.

Тем не менее, я получаю белый фон на панели вкладок.

 const DashboardTabNavigator = createBottomTabNavigator(
  {
    Posts: PostsStack,
    Subreddits: SubredditsScreen,
    Profile: ProfileScreen,
    Inbox: InboxScreen,
    Search: SearchScreen
  },
  {
    animationEnabled: false,
    swipeEnabled: false,
    lazyLoad: true,
    tabBarOptions: {
      tinColor: 'transparent',
      activeTintColor: 'red',
      inactiveTintColor: 'green',
      showIcon: true,
      showLabel: true,
      lazyLoad: true,
      upperCaseLabel: false,
      indicatorStyle: {
        backgroundColor: 'transparent'
      },
      style: {
        backgroundColor: 'rgba(22, 22, 22, 0.6)',
        borderTopWidth: 1,
        borderTopColor: '#996600',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0
      }
    },
    tabBarComponent: props => <TabBar {...props} />,
    navigationOptions: ({ navigation }) => {
      const { routeName } = navigation.state.routes[navigation.state.index];
      return routeName === 'Posts'
        ? { header: null }
        : { headerTitle: routeName }; // Disabled TabNavigators header for Posts screen cos It has its own header from another stacknavigator.
    }
  }
);

Выглядит так

Комментарии:

1. Я заметил, что вы смешиваете пользовательскую панель вкладок с tabBarOptions, что не будет работать. Вы должны либо определить параметры для панели вкладок react-navigation по умолчанию, либо создать пользовательскую панель вкладок.

2. Согласен, но создание пользовательской панели вкладок с прозрачным фоном тоже не сработало.

3. Вероятно, это не будет работать с использованием react-navigation, поскольку экраны, которые вы отображаете внутри панели вкладок, будут ограничены областью над панелью вкладок.

4. Понял, спасибо @dentemm, ваш комментарий заставил меня пересмотреть то, что я делал неправильно. Сделал это с помощью react-navigation.

Ответ №1:

tabBarOptions игнорируются, если tabBarComponent указано.

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

 style: {
        backgroundColor: 'rgba(22, 22, 22, 0.6)',
        borderTopWidth: 1,
        borderTopColor: '#996600',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0
      }

Ответ №2:

установить в опции панели вкладок

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