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

Question

我目前正在制作一个相当复杂的顶部标签导航栏使用材料顶部标签导航栏(包括在React导航中)。我注意到的是，在运行安卓10及更低版本以及iPhones的设备上，我的标签栏中的文本并不居中。

我想包括一个tabBarLabelStyle的条件渲染，这样只有当它是一个在Android10或更低版本和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

我设法有条件地为iOS设备渲染填充。然而，我注意到这个问题发生在Motorolla设备上。无论如何，这是iOS版本的代码，以防有人需要它

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

Answer 2

你可以这样做：

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

然后，为了有条件地呈现样式，您尝试过这样的方法吗？

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