El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Tab Navigator

Següent ►
►

En aquesta secció, aprendrem a utilitzar el Tab Navigator en React Navigation per crear una navegació amb pestanyes a la nostra aplicació React Native. El Tab Navigator és una eina poderosa que permet als usuaris navegar fàcilment entre diferents seccions de l'aplicació mitjançant pestanyes.

Objectius

  • Comprendre què és el Tab Navigator.
  • Configurar el Tab Navigator en una aplicació React Native.
  • Crear i personalitzar pestanyes.
  • Navegar entre diferents pantalles utilitzant el Tab Navigator.

Què és el Tab Navigator?

El Tab Navigator és un component de React Navigation que permet crear una interfície de navegació amb pestanyes. Cada pestanya pot contenir una pantalla diferent, i els usuaris poden canviar entre aquestes pantalles tocant les pestanyes.

Configuració del Tab Navigator

Instal·lació de React Navigation

Abans de començar, assegura't d'haver instal·lat React Navigation i les seves dependències. Si no ho has fet, segueix aquests passos:

npm install @react-navigation/native
npm install @react-navigation/bottom-tabs
npm install react-native-screens react-native-safe-area-context

Configuració bàsica

  1. Importar les dependències necessàries:
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Text, View } from 'react-native';
  1. Crear les pantalles:
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}
  1. Crear el Tab Navigator:
const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}
  1. Embolicar l'aplicació amb NavigationContainer:
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Personalització de les pestanyes

Podem personalitzar les pestanyes afegint icones i canviant els estils. Aquí tens un exemple de com fer-ho:

  1. Instal·lar react-native-vector-icons:
npm install react-native-vector-icons
  1. Importar Ionicons i utilitzar-lo en el Tab Navigator:
import Ionicons from 'react-native-vector-icons/Ionicons';

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'ios-home' : 'ios-home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-settings' : 'ios-settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Exercici pràctic

Objectiu

Crea una aplicació amb tres pestanyes: Home, Profile i Settings. Cada pestanya ha de tenir una icona diferent i un text que indiqui quina pantalla és.

Solució

  1. Crear les pantalles:
function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function ProfileScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Profile Screen</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings Screen</Text>
    </View>
  );
}
  1. Configurar el Tab Navigator:
function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'ios-home' : 'ios-home-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'ios-person' : 'ios-person-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-settings' : 'ios-settings-outline';
          }

          return <Ionicons name={iconName} size={size} color={color} />;
        },
      })}
      tabBarOptions={{
        activeTintColor: 'tomato',
        inactiveTintColor: 'gray',
      }}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}
  1. Embolicar l'aplicació amb NavigationContainer:
export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

Conclusió

En aquesta secció, hem après a configurar i utilitzar el Tab Navigator en una aplicació React Native. Hem vist com crear pestanyes, personalitzar-les amb icones i estils, i navegar entre diferents pantalles. Aquest coneixement és fonamental per crear aplicacions amb una navegació intuïtiva i fàcil d'utilitzar. En la següent secció, explorarem el Drawer Navigator per afegir un altre tipus de navegació a la nostra aplicació.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats