React导航:样式选项卡导航文本

c9x0cxw0  于 2023-01-09  发布在  React
关注(0)|答案(8)|浏览(155)

我在一个create-react-native-app中使用React Navigation
我正在使用TabNavigator组件,如下所示(iPhone SE):

TabNavigator是深蓝色条带,上面有“作业#1”、“聊天”、“文件”、“详细信息”。
我想自定义这些项目的文本。我想非大写的文本(据我所知,这是不可能实现的React本地样式表),并应用修复'细节'项目,这是换行到两行。
我已经浏览了TabNavigator上的React导航API,但一直未能找到答案。
我该如何设计这些物品的样式?

0s7z1bwu

0s7z1bwu1#

您可以修复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,
    },
  }
);
p1iqtdky

p1iqtdky2#

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

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

u4vypkhs3#

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

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

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

tabBarLabelStyle: {
  fontSize: 10,
},

内部

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

cwxwcias4#

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

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

nhjlsmyf5#

标签栏中存在属性

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

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

h5qlskok

h5qlskok6#

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>
  );
}
fkvaft9z

fkvaft9z7#

<Tab.Navigator
            tabBarOptions={{
                activeTintColor: "#50d3a7",
                inactiveTintColor: "gray",
                labelStyle: {
                    fontSize: 15,
                },
            }}
        >

引用:-使用引用

x8goxv8g

x8goxv8g8#

API已更改,大多数其他答案不再起作用。

<Tab.Navigator screenOptions={() => ({
  tabBarLabelStyle: styles.dashboard.tabBarLabelStyle
})}>

tabBarLabelStyle是样式对象。

相关问题