• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

82
Vistas
tabBarStyle extraño comportamiento en altura para iOS

Actualmente dediqué algún tiempo a resolver un problema en mi aplicación, pero no puedo encontrar una respuesta.

Hay un bottomTabNavigator personalizado, que tiene una altura en %, actualmente altura: '8%'. En el simulador de iPhone 8 (que no tiene 'muesca'), la altura funciona correctamente sin problemas y permite que tabBarItems se ubique en el centro verticalmente.

PERO, en todos los iPhones posteriores al 8, es decir, los que tienen 'muesca', la altura está configurada de manera incorrecta y los íconos están ubicados incorrectamente como se muestra en esta imagen: https://imgur.com/a/KKrDBB4

Para encontrar un problema, le di un color de fondo: 'verde' a tabBarItemStyle para verificar qué posiciones toma, y eso es lo que descubrí: https://imgur.com/a/4JAZ7K8

En el Iphone 8 y anteriores, el collar amarillo se llena de azul y es por eso que no hay problema, pero en los iPhone con 'muesca' este problema está presente. No tengo idea de cómo cambiar eso.

Si alguien tiene un consejo se lo agradeceré!

Este es el código:

 <Tab.Navigator screenOptions={{ tabBarShowLabel: false, tabBarHideOnKeyboard: true, tabBarActiveTintColor: '#FF9C33', safeAreaInset: { bottom: 0 }, headerShown: false, tabBarStyle: { position: 'absolute', bottom: 25, left: 70, right: 70, borderRadius: 35, height: '8%', backgroundColor: 'blue', elevation: 0, borderTopWidth: 0, // TO GET RID OFF WHITE LINE ON TOP }, tabBarItemStyle:{ backgroundColor:'yellow' } }} > <Tab.Screen name='Home' component={Home} options={{ tabBarIcon: ({color}) => <Icon name='home' size={32} color={color} />, tabBarIconStyle: {left: -20} }}/> <Tab.Screen name='Logout' component={signOut} options={{ tabBarIcon: ({color}) => <MaterialIcons name='logout' size={31} color={color} />, tabBarIconStyle: {left: 20}, }}/> </Tab.Navigator> ```
almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda