有没有一种方法可以更改组件中的标签栏样式,而不是App.js?

时间:2019-07-08 09:58:17

标签: react-native react-native-tabnavigator

我的应用程序支持英语和阿拉伯语,并支持LTR和RTL。

我将BottomTabBarNavigation createBottomTabNavigator用于选项卡菜单,并且工作正常。

我为标签菜单设置了以下样式。

tabBarOptions: {
  labelStyle: {
    display: 'none',
  },
  activeTintColor: '#fdb64b',
  inactiveTintColor: 'gray',
  style: {
    paddingBottom: moderateScale(10),
    backgroundColor: '#000',
    height: moderateScale(50),
    paddingTop: moderateScale(9),
    borderTopColor: '#191919',
    borderTopWidth: moderateScale(1)
  }
}

在上述样式中,如果我添加flexDirection: 'row'flexDirection: 'row-reverse',则会为我提供所需的样式,即翻转标签菜单的方向。

我想要实现的是,我有一个更改语言的屏幕,我希望选项卡栏应用'row-reverse'的样式(如果选择了阿拉伯语,而'row'则选择了英语)。

在tabBarOptions中具有类似的内容

flexDirection: global.IS_RTL ? 'row-reverse' : 'row'

问题是我无法在App.js中做到这一点,我想在加载应用程序时在其中一个组件中做到这一点,有什么方法可以在react-native中实现吗?

谢谢

1 个答案:

答案 0 :(得分:0)

根据我的见解和经验,我建议使用(基于本机的)选项卡栏。它比其他工具更容易,并且可以在组件中轻松进行编辑。您可以从(本机基本文档)中打开它。