React Navigation：样式化 TabNavigator 文本

Posted 2023-02-22

【中文标题】React Navigation：样式化 TabNavigator 文本

【英文标题】：React Navigation: styling TabNavigator text

【发布时间】：2018-08-20 10:11:49

【问题描述】：

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

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

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

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

我在 TabNavigator 上查看了 React Navigation API，但未能找到答案。

如何设计这些项目的样式？

【问题讨论】：

你试过使用labelStyle prop吗？

@bennygenel 如果我使用labelStyle，如何使用CSS来控制文本的大小写？

你可以尝试使用text-transform属性

@bennygenel 这是不可能的github.com/facebook/react-native/issues/2088

【参考方案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,
    ,
  
);

【参考方案2】：

标签栏有属性

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

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

【参考方案3】：

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

tabBarOptions: 
    tabStyle: 
        width: 'auto'
    

【参考方案4】：

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

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

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提出问题的人。请edit您的答案以添加解释并说明适用的限制和假设。 From Review

@double-beep style prop 将样式应用于整个标签屏幕导航容器，而 labelStyle 将样式应用于文本标签。

【参考方案5】：

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

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

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

tabBarLabelStyle: 
  fontSize: 10,
,

里面

 screenOptions=( route ) => (  )

【参考方案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>
  );

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。