反应导航：TabNavigator的样式文本

Question

我在创建反应的原生应用程序内使用React Navigation。

我使用的是这样的（iPhone SE）的TabNavigator组件：

该TabNavigator是深蓝色条带“工作＃1”，“聊天”，文件，“详细信息。

我想自定义这些项目的文本。我想非大写文字（如其中据我所知，是不可能作出反应本地样式表来实现），并应用修订的“详细信息”项目被包装成两行。

我已经通过在TabNavigator的该阵营导航API看了，但一直没能找到答案。

我怎样才能样式这些项目吗？

Answer 1

您可以修复使用JavaScript非大写的问题：

navigationOptions: {
  tabBarLabel: 'Job #1'.toLowerCase(),
},

或者使用tabBarOptions属性upperCaseLabel：

tabBarOptions: {
  upperCaseLabel: false,
}

为了避免我建议你减少标签的字体大小包装的文字：

tabBarOptions: {
  labelStyle: {
    fontSize: 10,
    margin: 0,
    padding: 0,
  },
}

最后，它必须看起来是这样的：

TabNavigator({
    ...
    filesTab: {
      screen: filesTabComponent,
      navigationOptions: {
        tabBarLabel: 'Files'.toLowerCase(),
      },
    },
    ...
  },
  {
    tabBarPosition: 'bottom',
    tabBarOptions: {
        upperCaseLabel: false,
    },
  }
);

Answer 2

有财产的TabBar

tabBarOptions:{ upperCaseLabel: false} //accept boolean default is true

https://reactnavigation.org/docs/tab-navigator.html#tabbaroptions-for-tabbartop-default-tab-bar-on-android