Question

我按照链接（https://reactnavigation.org/docs/tab-based-navigation.html）中的react-navigation API说明进行操作，并使用TabNavigator堆栈创建Tabbar应用程序，每个选项卡都有StackNavigator屏幕。我有目的地评论了tabBarComponent和tabBarPosition，因为我希望Tabs看起来像Android（Top Tabbbar）和IOS（Bottom Tabbar）的原生代码，具有相同的代码库。 IOS选项卡栏正常工作，但当我查看Android标签栏时，标签栏的顶部重叠/溢出到Android状态栏（我的意思是时间，电池和wifi符号出现的部分）。此外，与IOS标签栏大小相比，图标和标签字体大小更大，这使标签换行到下一行（请参阅“Abcd的ef”选项卡）。需要做什么，以便Android Tabbar像IOS标签栏一样正确显示，但在顶部，即没有溢出，包装文本和正确的图标和标签大小。我在下面提供了代码以及Android和IOS Tabbar的截图。

仅供参考，我使用Android和IOS设备上的Expo（不是模拟器）和create-react-native-app应用程序

[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

在tabBarOptions中使用allowFontScaling：false，通过添加此字体大小将不会根据设备fontSize进行缩放。

vec=sort(unique(data[,grep('note',colnames(data))]))

react-navigation Android Tabbar无法正确显示

1 个答案: