React Navigation:样式化 TabNavigator 文本

Posted

技术标签:

【中文标题】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。

以上是关于React Navigation:样式化 TabNavigator 文本的主要内容,如果未能解决你的问题,请参考以下文章

React Native,更改 React Navigation 标题样式

是否可以使用 react-navigation (v5) 以 UIModalPresentationPageSheet 或 UIModalPresentationFormSheet 样式呈现模式?

React Navigation 切换背景颜色和样式 StackNavigator

如何从react-navigation获取主题类型(Typescript)

如何在@react-navigation/bottom-tabs 中添加阴影?

使用样式化组件样式化 React 组件 (SVG)