时间戳

首页 > 解决方案 > 如何居中对齐 createMaterialTopTabNavigator

react-native - 如何居中对齐 createMaterialTopTabNavigator

问题描述

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

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"
  }
);

包.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-nativereact-navigationreact-native-navigation

解决方案

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

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

推荐阅读