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

Question

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

Привет всем,

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

<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>

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

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

Что я ожидаю, это

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

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

iOS Reaction-native: 0.61.5

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

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

Answer 1

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

<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>

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