0
293
Vistas¿Cómo puedo representar condicionalmente el relleno del texto que tengo dentro de mi navegador de pestañas superior?
Actualmente estoy en el proceso de hacer una barra de navegación de pestaña superior bastante compleja usando Material Top Tabs Navigator (incluido en React Navigation). Lo que noté es que el texto dentro de mi barra de pestañas no está centrado en dispositivos que ejecutan Android 10 e inferior junto con iPhones.
Me gustaría incluir una representación condicional para tabBarLabelStyle para que se aplique un relleno inferior al texto solo si se trata de un dispositivo con Android 10 o inferior y dispositivos 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 }} 
El relleno inferior posiblemente podría solucionar este problema si se procesa condicionalmente.
Intenté darle una oportunidad a este código
tabBarLabelStyle: { textTransform: 'none', fontSize:RFPercentage(1.2), {Platform.OS === 'ios' ? paddingBottom:5 : paddingBottom:0 } },Pero eso no parece funcionar. Creo que la versión SDK de Android se usa para verificar la versión de Android. Cualquier ayuda sería genial. ¡Gracias!
2 Respuestas
Responde la pregunta0
Podrías hacer esto:
import { Platform } from 'react-native'; const version = Platform.constants['Release'];Y luego, para renderizar condicionalmente los estilos, ¿has probado algo como esto?
style={[styles.mainStyle, condition ? styles.styleOne : styles.styleTwo]}0
Logré renderizar condicionalmente el relleno para dispositivos iOS. Sin embargo, he notado que este problema ocurre en los dispositivos Motorola. De todos modos, aquí está el código para la versión de iOS en caso de que alguien lo necesite.
tabBarLabelStyle: Platform.OS === 'ios' ? { textTransform: 'none', fontSize:RFPercentage(1.2), paddingBottom: windowHeight/15 } : { textTransform: 'none', fontSize:RFPercentage(1.2), },