如何有条件地为顶部选项卡导航器中的文本呈现填充？

Question

我目前正在使用 Material Top Tabs Navigator（包含在 React Navigation 中）制作一个相当复杂的 Top tab 导航栏。我注意到我的标签栏中的文本没有以设备运行 Android 10 及以下以及 iPhone 为中心。

我想包含 tabBarLabelStyle 的条件渲染，以便仅当它是 Android 10 或以下设备和 iOS 设备上的设备时，底部填充才会应用于文本。

screenOptions={{
                        tabBarActiveTintColor:colors.white,           // setting color here ensure that other tabs darken when not in focus
                        tabBarInactiveTintColor:colors.lightGrey,
                        tabBarLabelStyle: { textTransform: 'none', fontSize:RFPercentage(1.2), },          // font stuff added here, also had to make it lowercase cause navbar automatically uppercases whatever hmmm
                        tabBarStyle:{backgroundColor:colors.black, borderWidth:0, borderRadius:windowWidth, borderColor:colors.black, height:windowHeight/17, justifyContent:'center' },                                          //styles for the main top swipe navbar. Black in this case
                        tabBarIndicatorStyle:{backgroundColor:"#FFFFFF20", height:windowHeight/19, borderWidth:0, borderRadius:windowWidth, borderLeftWidth:windowWidth/200,borderRightWidth:windowWidth/200, borderColor:"black", bottom:windowHeight/350,  },              //HAD TO DO A LOT OF WORK HERE TO MAKE SURE THAT HIDDING INIDCATOR CAN BE FIT INSIDE THE NAVBAR. Since there is no literal way to highlight i had to use the bottom indicator using indicatorStyle object which i then made transparent by adding the number after the color hexcode                                                         
                        
                    }}

如果有条件地渲染，底部填充可能会解决这个问题。

我试了一下这段代码

                            tabBarLabelStyle: { textTransform: 'none', fontSize:RFPercentage(1.2), {Platform.OS === 'ios' ? paddingBottom:5 : paddingBottom:0  } },

但这似乎不起作用。我认为android SDK版本是用来检查Android版本的。任何帮助都会非常酷。谢谢！

Answer 1

你可以这样做：

import { Platform } from 'react-native';
const version = Platform.constants['Release'];

然后有条件地渲染样式，你试过这样吗？

style={[styles.mainStyle, condition ? styles.styleOne : styles.styleTwo]}

Answer 2

我设法有条件地为 iOS 设备呈现填充。但是我注意到这个问题发生在摩托罗拉设备上。无论如何，这是 iOS 版本的代码，以备不时之需

 tabBarLabelStyle: Platform.OS === 'ios' ? { textTransform: 'none', fontSize:RFPercentage(1.2), paddingBottom: windowHeight/15 } : { textTransform: 'none', fontSize:RFPercentage(1.2), },

如何有条件地为顶部选项卡导航器中的文本呈现填充？

How can I conditionally render padding for text I have inside my top tab navigator?

javascript

android

reactjs

react-native

react-navigation