如何将 createMaterialTopTabNavigator 右对齐

Question

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

我已经尝试过使用 tabStyle 和 alignSelf: 'flex-end' alignItems: 'flex-end' flexDirection: 'row'、justifyContent: 'flex-end'

来设置样式

代码如下：

const TabNavigator = createMaterialTopTabNavigator({

    ރިޕޯޓު: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1004}},
    ދީން: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1003}},
    ސިޔާސީ: {screen: MainScreenCategoryTabNavigator, params:{categoryID: 1002}},
    ޙަބަރު: {screen: MainScreenTabNavigator, params:{categoryID: 1000}},

},
    {
        initialRouteName:'ޙަބަރު',
        lazy: true,
        tabBarOptions: {
            labelStyle: {
                fontSize: 16,
                fontFamily: 'MV_Waheed',
                fontWeight: "200"
            },
            tabStyle: {
                width: 60,
                textAlign: 'right'
            },
        }
    },
);

就像我上面提到的，以及对所附图像的引用，我想将选项卡移到右侧而不是左侧。我怎样才能做到这一点？谢谢！

Answer 1

其中一种变体是使用您自己的组件作为 tabBar。通过这种方式，可以更轻松地根据需要对其进行自定义。从 'react-navigation-tabs';

导入 { createBottomTabNavigator, BottomTabBar }

const TabBarComponent = (props) => (<BottomTabBar {...props} />);

const TabScreens = createBottomTabNavigator(
  {
    tabBarComponent: props =>
      <TabBarComponent
        {...props}
        style={{ borderTopColor: '#605F60' }}
      />,
  },
);

Answer 2

已解决问题。对我来说，问题是我无法将其右对齐。我删除了宽度，这解决了我的问题。这就是所有需要做的事情

如何将 createMaterialTopTabNavigator 右对齐

How to align createMaterialTopTabNavigator to the Right

react-native-navigation

react-navigation