Как создать прозрачный фон в React Navigation 5.x?

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

Есть ли способ добиться этого? Я использую react-navigation 5 и создал настраиваемую нижнюю панель вкладок в соответствии с Bottom- вкладка-навигатор

Код, который я использую для нижней панели, следующий

import React from 'react';
import { View, StyleSheet } from 'react-native';
import colors from 'styles/colors';
import TabBarItem from './TabBarItem/TabBarItem';
const homeIcon = require('assets/maps.png');

export enum Item {
  Home,
  ProfileView,
}

const DashboardTabBar: React.FC<{}> = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.container}>
      <View style={styles.innerContainer}>
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];

          const isFocused = state.index === index;

          const onPress = () => {
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
            });

            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          const onLongPress = () => {
            navigation.emit({
              type: 'tabLongPress',
              target: route.key,
            });
          };

          return (
            <TabBarItem
              icon={homeIcon}
              isFocused={isFocused}
              onPress={onPress}
              onLongPress={onLongPress}
              options={options}
              key={route.key}
            />
          );
        })}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 18,
    backgroundColor: 'red', // I tried with 'transparent' here, but i see a white background instead of transparent
  },
  innerContainer: {
    height: 60,
    backgroundColor: colors.GREY_L_10,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    alignItems: 'center',
    borderRadius: 50,
    borderWidth: 1,
    borderColor: colors.GREY,
  },
});

export default DashboardTabBar;

Насколько я смотрел в коде, я не мог найти способа сделать его прозрачным.


person user3009752    schedule 01.04.2020    source источник
comment
Не могли бы вы поделиться кодом, генерирующим нижние вкладки? Где установить красный цвет?   -  person Zekros Admines    schedule 02.04.2020
comment
@ user3009752 что вы ожидаете увидеть за фоном? Изображение, какой-то цвет или, может быть, заставка для фона корневого представления?   -  person Christos Lytras    schedule 04.04.2020
comment
На заднем плане у меня есть вертикальная прокрутка, представляющая собой длинный список. Если у меня есть элемент за встроенным нижним навигатором React, я хочу, чтобы он был виден за ним   -  person user3009752    schedule 04.04.2020


Ответы (3)


Где-то в другом месте вашего кода у вас есть компонент, который использует ваш компонент DashboardTabBar. Вы должны добавить свойство tabBarOptions с объектом style в компонент Tab.Navigator, например:

    <Tab.Navigator
      tabBar={...}
      tabBarOptions={{
        style: {
          backgroundColor: 'transparent',
          position: 'absolute',
          left: 0,
          right: 0,
          bottom: 0,
          elevation: 0, <----to get rid of a shadow problem on Android
        },
      }}>
    { /* ...your screens go here */ }
</Tab.Navigator>

Я успешно сделал это как на iOS, так и на Android. Лично мне это не подходит для моего приложения. введите здесь описание изображения  введите описание изображения здесь

person Ben Butterworth    schedule 05.04.2020

По умолчанию Navigator, возвращенный из createBottomTabNavigator, не перекрывает экраны с TabBar. При этом, даже если ваш TabBar прозрачен, ваш экран заканчивается там, где начинается TabBar. Экран не заходит за TabBar

К счастью, все, что вам нужно сделать, это добавить position: 'absolute', bottom: 0, left: 0, right: 0 к вашему стилю TabBar container (к которому вы применяете backgroundColor: 'transparent')

person Max    schedule 05.04.2020

person    schedule
comment
Спасибо за ваш ответ. Я добавил красный цвет, чтобы было понятнее. Я уже пробовал с прозрачным, но безуспешно. Я вижу белый фон вместо прозрачного - person user3009752; 02.04.2020
comment
Этот белый цвет должен быть цветом фона вашего основного экрана. Попробуйте установить другой цвет и посмотрите. - person Rajan; 02.04.2020