如何为Material Top Tabs Navigator的文本条件渲染padding适配多设备？

你之前的写法不生效是因为在JS对象中直接嵌套条件块属于语法错误，样式属性的条件赋值需要直接写在属性值位置，或者通过对象展开运算符合并。
Android 10对应的系统API Level为29，你可以通过Platform.Version获取当前安卓设备的API版本进行判断。

具体实现步骤 #

1. 确保你已经从react-native中导入了Platform模块：

import { Platform } from 'react-native';

2. 修改tabBarLabelStyle配置，按需求添加条件判断：

screenOptions={{
  tabBarActiveTintColor:colors.white,
  tabBarInactiveTintColor:colors.lightGrey,
  tabBarLabelStyle: { 
    textTransform: 'none', 
    fontSize:RFPercentage(1.2), 
    // 条件判断：iOS 或 安卓10及以下时添加底部padding
    paddingBottom: (Platform.OS === 'ios' || (Platform.OS === 'android' && Platform.Version <= 29)) ? 5 : 0
  },
  tabBarStyle:{backgroundColor:colors.black, borderWidth:0, borderRadius:windowWidth, borderColor:colors.black, height:windowHeight/17, justifyContent:'center' },
  tabBarIndicatorStyle:{backgroundColor:"#FFFFFF20", height:windowHeight/19, borderWidth:0, borderRadius:windowWidth, borderLeftWidth:windowWidth/200,borderRightWidth:windowWidth/200, borderColor:"black", bottom:windowHeight/350,  },
}}

如果测试后发现5px的padding修正幅度不够，可自行调整数值到显示居中即可。

效果对比 #

• Android 10设备修复前效果：
  
• Android 11设备正常效果：
  

内容的提问来源于stack exchange，提问作者eeshankeni