react-native createBottomTabNavigator shows weird tab bar on Android

烈酒焚心 提交于 2020-08-09 09:20:11

问题


I am using react-navigation createBottomTabNavigator to create a bottom tabs navigation. The tab bar appears fine on iOS but on Android, it appears as below:

I am not sure what is causing to have this weird styling. Below is my code to create the bottom tab bar:

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

Each tab is a stack navigator. Alarms stack navigation is configured as below:

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

If you have experienced this problem in the past and know how to fix it, please let me know. Also let me know if you need any other information in order to solve the problem.

Thanks!


回答1:


Finally, I found the solution to this after long hard work.

elevation: 0

Set this on tab bar style will fix this issue.

Example -

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

Here are the output screenshots:

Before set "elevation: 0", it was looking like this

After set "elevation: 0", it's looking perfect




回答2:


I don't know why does the tab bar appear like above on Android but I was able to fix it by specifying the tab bar color in the tabBarOptions as shown below

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

By specifying the above tab bar background color style, the whole tab bar was a uniform grey color as expected.



来源:https://stackoverflow.com/questions/60809033/react-native-createbottomtabnavigator-shows-weird-tab-bar-on-android

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!