Question

我有一个使用本机反应的标签导航和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上贴上标签并让它们适应！唉，这是我现在的黑客行为。祝你好运！[/ p>

Answer 2

有完全相同的问题，我通过向tabBarOptions添加一个额外的道具并使用RN屏幕宽度属性来修复此问题。

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

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

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

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

Answer 3

评论here指出我们可以在两种平台样式之间切换。只需使用：

{{1}}

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

3 个答案: