Estil del navegador de pestanyes inferior amb radi de vora a la navegació React

Personalització del navegador de pestanyes inferior a React Native

Quan treballen amb el `createBottomTabNavigator` a React Navigation 0.7x, els desenvolupadors sovint busquen millorar l'atractiu visual de les seves aplicacions. Una personalització habitual és aplicar un radi de vora al navegador de pestanyes inferior. Tanmateix, això de vegades pot deixar espais no desitjats que no es combinen amb el disseny general.

En aquest article, explorarem com abordar aquests problemes de disseny canviant els espais sobrants del radi de la vora a un color blanc. Aquesta solució garantirà un aspecte perfecte i polit per a la vostra aplicació React Native, millorant l'experiència de l'usuari i la coherència de la interfície.

Millora del navegador de pestanyes inferior amb radi de vora

En els scripts proporcionats, tractem la personalització del navegador de pestanyes inferior a React Navigation 0,7x aplicant un radi de vora i assegurant-nos que els espais deixats pel radi de la vora siguin blancs. Els components principals implicats són el createBottomTabNavigator i el NavigationContainer. La funció createBottomTabNavigator configura el navegador de pestanyes, que permet als usuaris canviar entre diferents pantalles de l'aplicació. El NavigationContainer encapsula el navegador i proporciona el context necessari per a l'arbre de navegació. Mitjançant screenOptions, podem personalitzar l'aspecte de la barra de pestanyes, inclosa la seva posició, el color de fons i el radi de la vora.

La propietat tabBarStyle s'utilitza per definir l'estil de la barra de pestanyes. Les propietats clau inclouen position, backgroundColor, borderRadius i shadowColor. El mètode StyleSheet.create s'utilitza per crear un objecte de full d'estil que garanteix un estil coherent entre els components. Per abordar el problema dels espais que deixa el radi de la vora, utilitzem propietats com borderWidth i borderColor per establir la vora en blanc, garantint un aspecte perfecte. Les propietats shadowOffset, shadowOpacity i elevation milloren la profunditat i l'efecte visual de la barra de pestanyes, sent elevació especialment important per a Android per crear una sensació de profunditat.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarStyle: {
          position: 'absolute',
          bottom: 20,
          left: 20,
          right: 20,
          elevation: 0,
          backgroundColor: '#ffffff',
          borderRadius: 15,
          height: 70,
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 10 },
          shadowOpacity: 0.25,
          shadowRadius: 3.5,
          borderWidth: 1,
          borderColor: '#ffffff'
        }
      }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  shadow: {
    shadowColor: '#7F5DF0',
    shadowOffset: { width: 0, height: 10 },
    shadowOpacity: 0.25,
    shadowRadius: 3.5,
    elevation: 5
  }
});

.tabBarStyle {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  elevation: 0;
  background-color: #ffffff;
  border-radius: 15px;
  height: 70px;
  shadow-color: #000;
  shadow-offset: { width: 0, height: 10 };
  shadow-opacity: 0.25;
  shadow-radius: 3.5px;
  border-width: 1px;
  border-color: #ffffff;
}

.shadow {
  shadow-color: #7F5DF0;
  shadow-offset: { width: 0, height: 10 };
  shadow-opacity: 0.25;
  shadow-radius: 3.5px;
  elevation: 5;
}

Tècniques avançades per dissenyar el navegador de pestanyes inferiors

Més enllà de l'estil bàsic del navegador de pestanyes inferior a React Navigation, les tècniques avançades poden millorar encara més la interfície d'usuari. Un d'aquests mètodes és integrar icones personalitzades per a cada pestanya. Utilitzant biblioteques com react-native-vector-icons, podeu afegir icones vectorials escalables que coincideixin amb el tema de la vostra aplicació. Això implica importar el component Icona de la biblioteca i configurar-lo com a icona de pestanyaBar a les Opcions de pantalla. En personalitzar les icones, proporcioneu una experiència de navegació més intuïtiva i visualment atractiva per als usuaris.

Un altre aspecte a tenir en compte és l'ús de l'estil condicional basat en la pestanya activa. En aprofitar la propietat focused dins de tabBarOptions, podeu canviar dinàmicament l'estil de la pestanya activa per ressaltar-la. Per exemple, podeu ajustar tabBarLabelStyle i tabBarIcon per canviar els colors o les mides quan se selecciona una pestanya. Aquesta tècnica millora els comentaris dels usuaris i fa que la navegació sigui més intuïtiva. A més, la implementació d'un full inferior o modal dins d'una pestanya pot proporcionar una experiència d'usuari més rica, permetent interaccions més detallades dins d'una sola pestanya.

Consideracions finals sobre la personalització del navegador de la pestanya inferior

L'estil correcte del navegador de pestanyes inferior a React Navigation requereix una atenció especial als detalls. Aprofitant les propietats i els mètodes adequats, podeu crear una experiència de navegació perfecta i visualment atractiva. Ajustar el radi de la vora i gestionar els espais que queden poden millorar significativament l'estètica i la usabilitat de l'aplicació, fent-la més atractiva per als usuaris.