реактивный createBottomTabNavigator показывает странную панель вкладок на Android

Question

Я использую react-navigation createBottomTabNavigator для создания навигации по нижним вкладкам. Панель вкладок выглядит нормально на iOS, но на Android она выглядит следующим образом:

Я не уверен, что вызывает это странное моделирование. Ниже приведен мой код для создания нижней панели вкладок:

    <Provider store={store}>
      <NavigationContainer theme={GlobalConfig.theme}>
        <Tab.Navigator
          screenOptions={({route}) => ({
            tabBarIcon: ({focused, color, size}) => {
              let iconSrc

              if (route.name === 'Alarms') {
                iconSrc = require('../img/ic_alarm.png')
              } else if (route.name === 'Settings') {
                iconSrc = require('../img/ic_settings.png')
              }

              return (
                <Image
                  source={iconSrc}
                  style={{
                    tintColor: focused
                      ? GlobalConfig.theme.colors.primary
                      : GlobalConfig.theme.colors.tabBarIconUnselected
                  }}
                />
              )
            }
          })}
          tabBarOptions={{
            activeTintColor: GlobalConfig.theme.colors.primary,
            inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected
          }}>
          <Tab.Screen name={I18n.t('alarms')} component={AlarmsTab} />
          <Tab.Screen name={I18n.t('settings')} component={SettingsTab} />
        </Tab.Navigator>
      </NavigationContainer>
    </Provider>

Каждая вкладка является навигатором стека. Навигация по стеку аварийных сигналов настраивается следующим образом:

    <Stack.Navigator
      initialRouteName="AlarmListScreen"
      screenOptions={{
        headerStyle: {
          backgroundColor: GlobalConfig.theme.colors.primary
        },
        headerTintColor: GlobalConfig.theme.colors.background
      }}>
      <Stack.Screen
        name="AlarmListScreen"
        component={AlarmListScreen}
        options={{title: I18n.t('alarms')}}
      />
      <Stack.Screen
        name="AlarmDetailsScreen"
        component={AlarmDetailsScreen}
        options={{title: 'Alarm Details'}}
      />
    </Stack.Navigator>

Если вы сталкивались с этой проблемой в прошлом и знаете, как ее исправить, сообщите мне. Также дайте мне знать, если вам нужна другая информация для решения проблемы.

Спасибо!

Answer 1

Я не знаю, почему панель вкладок выглядит как выше на Android, но я смог исправить это, указав цвет панели вкладок в tabBarOptions, как показано ниже

            tabBarOptions={{
              activeTintColor: GlobalConfig.theme.colors.primary,
              inactiveTintColor: GlobalConfig.theme.colors.tabBarIconUnselected,
              style: {
                backgroundColor: GlobalConfig.theme.colors.tabBarBackground
              }
            }}

При указании вышеуказанного стиля цвета фона панели вкладок вся панель вкладок была однородного серого цвета, как и ожидалось.