如何居中对齐 createMaterialTopTabNavigator答案

【问题标题】：How to center align createMaterialTopTabNavigator如何居中对齐 createMaterialTopTabNavigator
【发布时间】：2020-11-06 10:15:52
【问题描述】：

目前我的项目都在左边，因为它们应该是默认的。我似乎无法将其移至中心。作为参考，我附上了一张图片

https://i.stack.imgur.com/lZ2Eu.png

我已经尝试使用 tabStyle 设置它的样式并使用 alignSelf: 'center' alignItems: 'center' flexDirection: 'row', justifyContent: 'center'

代码如下：

export const FoodScreenNavigator = createMaterialTopTabNavigator(
  {
    "McD": {
      screen: McDGrid,
      navigationOptions: {
        tabBarLabel: "McD"
      }
    },
    "Subway": {
      screen: SubwayScreen,
      navigationOptions: {
        tabBarLabel: "Subway"
      }
    },
    "BurgerKings": {
      screen: BurgerKingSelection,
      navigationOptions: {
        tabBarLabel: "Burger Kings"
      }
    },
    "ItalianMCT": {
      screen: StyleSelection,
      navigationOptions: {
        tabBarLabel: "Italian MCT"
      }
    }
  },
  {
    tabBarOptions: {
      activeTintColor: colors.FontColors.light_grey,
      inactiveTintColor: colors.FontColors.light_grey,
      style: {
        backgroundColor: colors.FontColors.dark_grey,
        justifyContent: "center"
      },
      labelStyle: {
        textAlign: "center",
        fontSize: fonts.h5,
        fontFamily: fonts.OpenSansSemiBold,
        justifyContent: "center"
      },
      tabStyle:{
        width: "auto"
      },
      indicatorStyle: {
        borderBottomColor: colors.UiBgColors.light_red,
        borderBottomWidth: 4,
        justifyContent: "center"
      },
      upperCaseLabel: false
    },
    backBehavior: "none"
  }
);

package.json

"react-navigation": "^4.0.8",
    "react-navigation-drawer": "^2.2.2",
    "react-navigation-stack": "^1.9.0",
    "react-navigation-tabs": "^2.5.6",

【问题讨论】：

标签： react-native react-navigation react-native-navigation

【解决方案1】：

尝试在标签样式中添加marginLeft，例如

tabStyle:{
        width:"auto",
        marginLeft:3,
},

【讨论】：