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

经过长期的努力，我终于找到了解决这个问题的方法。

海拔：0

在选项卡栏样式上设置此选项将解决此问题。

例子 -

tabBarOptions={{
        showIcon: true,
        showLabel: true,
        activeTintColor: COLORS.tabSelected,
        inactiveTintColor: COLORS.tabNormal, 
        style: {
          backgroundColor:'transparent',
          borderTopWidth: 0,
          position: 'absolute',
          elevation: 0  // <-- this is the solution
        },
        labelStyle: {
          fontSize: 12,
        },
      }}>

以下是输出截图：

在设置“海拔：0”之前，它看起来像这样

设置“海拔：0”后，它看起来很完美