react-native 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
              }
            }}

通过指定上面的标签栏背景颜色样式，整个标签栏为预期的均匀灰色。