如何设置或配置Android的反应导航选项卡以适应

Question

我有一个使用react native的标签导航,react-navigation 我的5个标签在Android上太过于挤压但看起来很适合iOS.如何设置标签的样式以适应Android？我可以将标签水平滚动吗？我想我记得在某个地方看过 - 那是标准的android行为吗？

Answer 1

好吧,首先您需要决定是否要在Android应用的底部或顶部添加标签.我选择了最低点,我只有图标,没有文字(我这样做是因为Android上的React Navigation上带有文字的图标非常多,但在iPhone上看起来很好).以下是一些示例代码:

import React from 'react';
import { TabNavigator } from 'react-navigation';
import { MaterialIcons, Ionicons } from '@expo/vector-icons';
import { Platform } from 'react-native';

// Import Screens
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';

export const Tabs = TabNavigator({
  Screen1: {
    screen: Screen1,
    navigationOptions: {
      tabBarLabel: 'Screen1',
      tabBarIcon: ({ tintColor }) => <MaterialIcons name='account-circle' size={26} style={{ color: tintColor }} />
    },
  },
  Screen2: {
    screen: Screen2,
    navigationOptions: {
      tabBarLabel: 'Screen2',
      tabBarIcon: ({ tintColor }) => <Ionicons name='ios-time' size={26} style={{ color: tintColor }} />
    },
  },
}, {
    headerMode: 'none',        // I don't want a NavBar at top
    tabBarPosition: 'bottom',  // So your Android tabs go bottom
    tabBarOptions: {
      activeTintColor: 'red',  // Color of tab when pressed
      inactiveTintColor: '#b5b5b5', // Color of tab when not pressed
      showIcon: 'true', // Shows an icon for both iOS and Android
      showLabel: (Platform.OS !== 'android'), //No label for Android
      labelStyle: {
        fontSize: 11,
      },
      style: {
        backgroundColor: '#fff', // Makes Android tab bar white instead of standard blue
        height: (Platform.OS === 'ios') ? 48 : 50 // I didn't use this in my app, so the numbers may be off. 
      }
    },
});

一旦我将标签放到底部并取下标签,只需在Android上的图标看起来很好,这就是我的应用程序.许多Android应用只使用文字,所以你也可以这样做.但你可能还是要把它们放到最底层.我知道这不是一个长期的解决方案,因为我希望能够自由地在Android上贴上标签并让它们适应!唉,这是我现在的黑客行为.祝你好运伴侣!