React Navigation：样式化TabNavigator文本

Question

我在create-react-native-app中使用React Navigation。

我正在使用TabNavigator组件（iPhone SE）：

TabNavigator是深蓝色条带，其中包含“作业＃1＆＃39;”，“聊天”，“文件＆＃39”，“＆＃39;详细信息。”

我想自定义这些项目的文本。我想要非大写文本（据我所知，使用React Native Stylesheet无法实现），并且应用了一个修复＆＃39;详细信息＆＃39;包裹在两行上的项目。

我在TabNavigator上查看了React Navigation 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

<Tab.Navigator 
  tabBarOptions={{
    labelStyle: { textTransform: "none", },
      style: {
        /* ** */
      },
}}>

  <Tab.Screen name="Screen 1" component={Screen1} />
  <Tab.Screen name="Screen 2" component={Screen2} />
</Tab.Navigator>

Answer 3

tabbar中有属性

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

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

Answer 4

要删除文字换行，您可以执行以下操作

tabBarOptions: {
    tabStyle: {
        width: 'auto'
    }
}