0

我正在使用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>

如果您过去遇到过此问题并知道如何解决，请告诉我。如果您需要任何其他信息来解决问题，也请告诉我。

谢谢！

4

2 回答 2

2

经过长时间的努力，我终于找到了解决方案。

海拔：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”后，它看起来很完美

设置后

于 2020-07-21T11:43:58.657 回答
0

我不知道为什么标签栏在 Android 上会像上面那样出现，但我可以通过指定标签栏颜色来修复它，tabBarOptions如下所示

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

通过指定上面的标签栏背景颜色样式，整个标签栏如预期的那样是统一的灰色。

于 2020-03-30T05:41:14.293 回答