如何将 createMaterialTopTabNavigator 向右对齐

Question

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

https://ibb.co/fYFPMFJ

我已经尝试过使用

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

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

Answer 2

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

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

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

Answer 3

如果您使用其他方式创建导航：

const Tab = createMaterialTopTabNavigator();

使用

tabBarItemStyle

和

tabBarIndicatorStyle

进行样式设置 代码现在看起来像：

<TopTab.Navigator screenOptions={{
     tabBarIndicatorStyle:{ left:200 },
     tabBarItemStyle:{ width:100, left:200 }}}>
       <TopTab.Screen  name='screen1' component={Screen1} />
       <TopTab.Screen name='screen2' component={Screen2} />
  </TopTab.Navigator>