我如何设计或配置 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 的顶部并让它们适合！ las，这是我现在的技巧。祝你好运！

Answer 2

评论here指出我们可以在两个平台之间切换styles.Just使用这个：

TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
}, {
    ...TabNavigator.Presets.iOSBottomTabs
})

Answer 3

有完全相同的问题，我通过向 tabBarOptions 添加一个额外的属性并使用 RN 屏幕宽度属性解决了这个问题。

首先你需要抓取屏幕宽度。

import {Dimensions} from 'react-native'
const SCREEN_WIDTH = Dimensions.get('window').width

然后在 tabBarOptions 中为 SCREEN_WIDTH 添加一个 tabStyle 道具，并将其除以您拥有的选项卡数量。有点硬编码，但对我来说效果很好！

tabBarOptions{
  tabStyle: {
    width:SCREEN_WIDTH/2 //-> e.g number of tabs
  }
}

Answer 4

在 reactnavigation 中，6 个选项卡选项已被删除。现在您有了一组新的可用选项。对于样式，您可以使用

tabBarStyle : {
     height: 150,
}

这是所有 options 的列表。

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

How do I style or configure the react navigation tabs for android to fit

react-native-android

react-navigation