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)