Как обрабатывать цвет фона SafeArea с помощью навигации по нижней вкладке?

Текущее поведение

Всем привет,

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

<Tab.Navigator
      tabBarOptions={{
        activeTintColor: '#FF0000',
        activeBackgroundColor: '#FFFFFF',
        inactiveBackgroundColor: '#FF0000',
        inactiveTintColor:  '#FFFFFF'
      }}>
      <Tab.Screen
        name="Home"
        component={HomeScreen}
      />
      <Tab.Screen
        name="Account"
        component={AccountScreen}
      />
    </Tab.Navigator>

https://user-images.githubusercontent.com/6939811/76062160-b6dfde00-5fb7-11ea-8808-3f2562e90c24.png

Проблема в том, что SafeArea имеет белый фон.

Ожидаемое поведение

Я ожидаю, что

Не могли бы вы рассказать мне, как решить эту проблему в React Navigation версии 5? Спасибо!

Ваше окружение

Нативная реакция iOS: 0.61.5

@ реагировать-навигация / родной: ^ 5.0.5

@ реагировать-навигация / нижние вкладки: ^ 5.0.5


react-native react-navigation react-navigation-bottom-tab react-navigation-v5
person Danh Nguyen    schedule 06.03.2020    source источник
comment
Я сам сталкиваюсь с этим. При удаче?   -  person Nick Curran    schedule 22.03.2020
comment
У меня точно такая же проблема!   -  person Stiven Castillo    schedule 31.03.2020

Ответы (2)


arrow_upward
3
arrow_downward

Я просто установил backgroundColor

<Tab.Navigator
    initialRouteName="Stack_Main"
    tabBarOptions={{
      style: {
        backgroundColor: "#FF0000",
      },
    }}
  >
person amir hossein hayati    schedule 09.12.2020

arrow_upward
1
arrow_downward

Я нашел вариант (мне не нравится, но он работает) в этом ответе: Как сделать прозрачной панель вкладок react-native, response-navigation

<Tab.Navigator
      tabBarOptions={{
        showLabel: false,
        activeTintColor: theme.primary,
        inactiveTintColor: theme.tintInactiveTabBar,
        style: {
          backgroundColor: theme.backgroundTabBar,
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          borderTopRightRadius: 10,
          borderTopLeftRadius: 10,
        },
      }}>...</Tab.Navigator>

Положите позицию: абсолютный и нижний, левый и правый атрибуты. Меня устраивает.

person Stiven Castillo    schedule 31.03.2020