react-native-android - 我如何设计或配置适合 android 的 React 导航选项卡

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 的顶部并让它们适合!唉，这是我现在的黑客。祝你好运!