React native android 如何设置android的react导航选项卡的样式或配置以使其适合

我有一个标签导航，使用react-native和

react-navigation

我的5个标签在android上挤压得太厉害，但在iOS上看起来不错。如何设置标签的样式以适合android？我可以使标签水平滚动吗？我想我记得在某个地方看到过——这是标准的安卓行为吗？

首先，你需要决定你想在安卓应用程序的底部还是顶部设置标签。我选择了底部，我只有图标，没有文本（我这样做是因为在Android导航上有文本的图标对人群的反应非常糟糕，但在iPhone上看起来很好）。下面是一些示例代码：

从“React”导入React；
从“反应导航”导入{TabNavigator}；
从“@expo/vector icons”导入{MaterialIcons，Ionicons}；
从“react native”导入{Platform}；
//导入屏幕
从“../screens/Screen1”导入Screen1；
从“../screens/Screen2”导入Screen2；
导出常量选项卡=选项卡导航器({
屏幕1：{
屏幕：屏幕1，
导航选项：{
tabBarLabel:“屏幕1”，
tabBarIcon:（{tintColor}）=>
},
},
屏幕2：{
屏幕：屏幕2，
导航选项：{
tabBarLabel:“屏幕2”，
tabBarIcon:（{tintColor}）=>
},
},
}, {
headerMode:'无'，//我不希望顶部有导航栏
tabBarPosition:'bottom'，//这样你的Android标签就可以放在底部了
选项卡选项：{
activeTintColor:'红色'，//按下时选项卡的颜色
InactiveIntColor:“#b5”，//未按时选项卡的颜色
showIcon:'true'，//显示iOS和Android的图标
showLabel:（Platform.OS！==“android”），//android没有标签
标签样式：{
尺寸：11，
},
风格：{
backgroundColor:“#fff”，//使Android选项卡栏变为白色，而不是标准的蓝色
高度：（Platform.OS==='ios'）？48:50//我在我的应用程序中没有使用这个，所以数字可能不正确。
}
},
});注释指出，我们可以在两种平台样式之间切换。只需使用以下命令：

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

同样的问题，我通过在选项卡选项中添加一个额外的道具并使用RN屏幕宽度属性来解决

首先，您需要获取屏幕宽度

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

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

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

我知道有些选项卡允许水平滚动溢出，以便您可以容纳更多项目-react导航支持吗？我认为react导航不支持它。看看这些：