React Navigation：设置TabNavigator文本的样式

Question

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

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

这TabNavigator是深蓝色的条，带有“作业1”，“聊天”，“文件”，“详细信息”。

我要自定义这些项目的文本。我想要非大写的文本（据我所知，这是用React Native Stylesheet不可能实现的），并为包裹在两行上的'Details'项目应用修复程序。

我在TabNavigator上浏览了React Navigation API，但是找不到答案。

如何为这些物品定型？

Answer 1

只需对新版本的 React Native 执行此操作

<Tab.Navigator
    screenOptions={({ route }) => ({
      tabBarActiveTintColor: "#f5610a",
      tabBarInactiveTintColor: "#555",
      tabBarLabelStyle: {
        fontSize: 10,
      },
    })}
  >

正如您在上面的代码行中看到的那样......只需输入以下内容

tabBarLabelStyle: {
  fontSize: 10,
},

里面

 screenOptions={({ route }) => ({  })}

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

您可以使用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,
    },
  }
);