反应运动Android Tabbar无法正确显示

Question

i遵守了react-nvigation api指令，如链接(https://reaectnavigation.org/docs/tab-lase-navigation.html(，并使用tabnavigator stack and tabnavigator stack and tabbar应用每个选项卡都有stacknavigator屏幕。我故意评论了TABBARCOMPONEN和TABBARPOINTION，因为我希望Tabs像Android(Tabbbar(和具有相同代码库的Android(Top Tabbbar(和iOS(底部TABBAR(一样出现。iOS选项卡栏正常工作，但是当我查看Android TABBAR时，TAB栏的顶部是重叠/溢出到Android状态栏(我的意思是，我的意思是出现时间，电池和WiFi符号的部分(。此外，与iOS选项卡栏尺寸相比，图标和标签字体尺寸更大，该标签可以包装到下一行(请参阅" ABCD的EF"选项卡(。需要做的事情，以使Android Tabbar像iOS Tabbar一样正确显示，但在顶部，即没有溢出，包装文本，正确的图标和标签大小。我在代码下方提供了Android和iOS Tabbar的屏幕截图。

fyi，我在Android和iOS设备(而不是模拟器(上使用创建反应的本地应用程序

[IOS][1]
[Android][2]
[Android Screen with issue details][3]
***Commented Code:***
    //tabBarComponent: TabBarBottom,
    //tabBarPosition: 'bottom', 
***Codes:***
    <code>
        import React, { Component } from 'react';
        import { View, Text, StyleSheet, Platform } from 'react-native';
        import FirstScreen from './tabs/FirstScreen';
        //import SecondScreen from './tabs/SecondScreen';
        import FagsHome from './FagsHome';
        import Movies from './Movies';
        import MenuSecondScreen from './MenuSecondScreen';
        import ThirdScreen from './tabs/ThirdScreen';
        import FourthScreen from './tabs/FourthScreen';
        import FifthScreen from './tabs/FifthScreen';
        import { TabNavigator, TabBarBottom, StackNavigator } from 'react-navigation';
        import IconOcticons from 'react-native-vector-icons/Octicons';
        import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
        // What's Up
        const WhatsupStackMain = StackNavigator(
            {
                FirstScreen: {
                  screen: FirstScreen,
                },
                Movies: {
                  screen: Movies,
                },
            },
            {
                initialRouteName: 'FirstScreen',
            }
        );
        const WhatsupStack = StackNavigator(
            {
              Main: {
                screen: WhatsupStackMain,
              },
              MenuFags: {
                screen: MenuSecondScreen,
              },
            },
            {
              mode: 'card',
              headerMode: 'none',
            }
        );
        // Fags
        const FagsStackMain = StackNavigator(
            {
                FagsHome: {
                  screen: FagsHome,
                },
                Movies: {
                  screen: Movies,
                },
            },
            {
                initialRouteName: 'FagsHome',
            }
        );
        const FagsStack = StackNavigator(
            {
              Main: {
                screen: FagsStackMain,
              },
              MenuFags: {
                screen: MenuSecondScreen,
              },
            },
            {
              mode: 'card',
              headerMode: 'none',
            }
        );
        // Tags
        const TagsStackMain = StackNavigator(
            {
                ThirdScreen: {
                  screen: ThirdScreen,
                },
                Movies: {
                  screen: Movies,
                },
            },
            {
                initialRouteName: 'ThirdScreen',
            }
        );
        const TagsStack = StackNavigator(
            {
              Main: {
                screen: TagsStackMain,
              },
              MenuFags: {
                screen: MenuSecondScreen,
              },
            },
            {
              mode: 'card',
              headerMode: 'none',
            }
        );
        // Settings
        const SettingsStackMain = StackNavigator(
            {
                FourthScreen: {
                  screen: FourthScreen,
                },
                Movies: {
                  screen: Movies,
                },
            },
            {
                initialRouteName: 'FourthScreen',
            }
        );
        const SettingsStack = StackNavigator(
            {
              Main: {
                screen: SettingsStackMain,
              },
              MenuFags: {
                screen: MenuSecondScreen,
              },
            },
            {
              mode: 'card',
              headerMode: 'none',
            }
        );
        // Profile
        const ProfileStackMain = StackNavigator(
            {
                FifthScreen: {
                  screen: FifthScreen,
                },
                Movies: {
                  screen: Movies,
                },
            },
            {
                initialRouteName: 'FifthScreen',
            }
        );
        const ProfileStack = StackNavigator(
            {
              Main: {
                screen: ProfileStackMain,
              },
              MenuFags: {
                screen: MenuSecondScreen,
              },
            },
            {
              mode: 'card',
              headerMode: 'none',
            }
        );
        // Tabs
        export default TabNavigator(
            {
              'Abcd's ef': { screen: WhatsupStack },
              Ghij: { screen: FagsStack },
              Klmn: { screen: TagsStack },
              Settings: { screen: SettingsStack },
              Profile: { screen: ProfileStack },
            },
        {
          navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
              const { routeName } = navigation.state;
              let iconName;
     if (routeName === 'Abcd's ef') {
                //iconName = `ios-information-circle${focused ? '' : '-outline'}`;
                //return <Icon name={focused ? 'globe' : 'globe'} size={22} 
                            //style={{ color: focused ? '#ff0066' : 'black'}}/>;
                return <IconOcticons name={'globe'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>;
          } else if (routeName === 'Ghij') {
            //iconName = `ios-options${focused ? '' : '-outline'}`;
            return <IconFontAwesome name={'users'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
          } else if (routeName === 'Klmn') {
            //iconName = `ios-options${focused ? '' : '-outline'}`;
            return <IconFontAwesome name={'heart'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
          } else if (routeName === 'Settings') {
            //iconName = `ios-options${focused ? '' : '-outline'}`;
            return <IconOcticons name={'gear'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
          } else if (routeName === 'Profile') {
            //iconName = `ios-options${focused ? '' : '-outline'}`;
            return <IconFontAwesome name={'user'} size={22} style={{ color: focused ? '#ff0066' : 'black'}}/>
          }
          // You can return any component that you like here! We usually use an
          // icon component from react-native-vector-icons
          //return <Ionicons name={iconName} size={25} color={tintColor} />;
                },
              }),
              tabBarOptions: {
                activeTintColor: '#ff0066',
                inactiveTintColor: 'gray',
                showIcon: true,
                upperCaseLabel: false,
              },
              //tabBarComponent: TabBarBottom,
              //tabBarPosition: 'bottom',
              animationEnabled: true,
              swipeEnabled: true,
            }
          );
    </code>
  [1]: https://i.stack.imgur.com/0oVwG.png
  [2]: https://i.stack.imgur.com/QQhN4.png
  [3]: https://i.stack.imgur.com/oFeiG.png

Answer 1

使用允许fontscaling：tabbaroptions中的false，通过添加此字体大小不会根据设备的字体扩展。

tabBarOptions:{ allowFontScaling:false }