时间戳

首页 > 解决方案 > 有没有办法改变组件而不是 App.js 中的标签栏样式？

react-native - 有没有办法改变组件而不是 App.js 中的标签栏样式？

问题描述

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

我正在使用 BottomTabBarNavigationcreateBottomTabNavigator作为选项卡菜单，它工作正常。

我为选项卡菜单设置了以下样式。

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 中实现这一点？

谢谢

标签： react-nativereact-native-tabnavigator

解决方案

根据我的意见和经验，我会推荐使用 (native-base) Tab bar。它比其他更容易，并且可以在组件中轻松编辑。您可以从（react-native base doc）打开它。

推荐阅读