目前我的项目都在左侧,因为它们应该是默认的。我似乎无法将其移至右侧。作为参考,我附上了一张图片
我已经尝试过使用
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'
},
}
},
);
就像我上面提到的,以及对所附图像的引用,我想将选项卡移动到右侧而不是左侧。我怎样才能实现这个目标? 谢谢!
解决了问题。对我来说,问题是我无法将其向右对齐。我删除了宽度,这解决了我的问题。这就是需要做的全部事情
其中一种变体是使用您自己的组件作为 tabBar。通过这种方式,可以更轻松地根据需要对其进行自定义。 从 'react-navigation-tabs' 导入 { createBottomTabNavigator, BottomTabBar };
const TabBarComponent = (props) => (<BottomTabBar {...props} />);
const TabScreens = createBottomTabNavigator(
{
tabBarComponent: props =>
<TabBarComponent
{...props}
style={{ borderTopColor: '#605F60' }}
/>,
},
);
如果您使用其他方式创建导航:
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>