React Navigation：样式化 TabNavigator 文本

Question

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

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

TabNavigator 是带有“Job #1”、“Chat”、“Files”、“Details”的深蓝色条带。

我想自定义这些项目的文本。我想要非大写文本（据我所知，使用 React Native 样式表是不可能实现的），并为包含两行的“详细信息”项目应用修复。

我在 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

标签栏有属性

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

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

Answer 3

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

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

Answer 4

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

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

Answer 5

只需为新版本的 react native 执行此操作

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

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

tabBarLabelStyle: {
  fontSize: 10,
},

里面

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

Answer 6

import * as React from 'react';
import { Text, View, SafeAreaView } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import Followers from './Followers ';
import Following from './Following';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import CustomStatusBar from '../../../Components/CustomStatusBar';
import { COLORS } from '../../../Components/Colors';

const Tab = createMaterialTopTabNavigator();

const name = 'jklhdsjkhka';

export default function FolloweList() {
  return (
    <SafeAreaProvider>
      <CustomStatusBar />
      <NavigationContainer>
        <Tab.Navigator
          screenOptions={{
            tabBarActiveTintColor: '#00a3ff',
            tabBarInactiveTintColor: '#F3B1CD',
            tabBarLabelStyle: { textAlign: 'center' },
            tabBarIndicatorStyle: {
              borderBottomColor: '#C2D5A8',
              borderBottomWidth: 2,
            },
            tabBarStyle: { backgroundColor: COLORS.White },

            tabBarLabelStyle: {
              textTransform: 'none',
            },
          }}
        >
          <Tab.Screen name="Home" component={Followers} />
          <Tab.Screen name="Settings" component={Following} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}