Navegacion y Enrutamiento

React Navigation

React Navigation es la biblioteca de navegacion mas popular para React Native. Proporciona navegadores stack, tab, drawer y mas.

Instalacion

# Instalar dependencias principales
npm install @react-navigation/native

# Instalar dependencias de Expo
npx expo install react-native-screens react-native-safe-area-context

# Instalar navegadores que necesites
npm install @react-navigation/native-stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Stack Navigator

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Inicio">
        <Stack.Screen
          name="Inicio"
          component={PantallaInicio}
          options={{ title: 'Mi App' }}
        />
        <Stack.Screen
          name="Detalles"
          component={PantallaDetalles}
          options={({ route }) => ({
            title: route.params.titulo
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

// Pantalla con navegacion
function PantallaInicio({ navigation }) {
  return (
    <View>
      <Button
        title="Ir a Detalles"
        onPress={() => navigation.navigate('Detalles', {
          itemId: 42,
          titulo: 'Detalles del Item',
        })}
      />
    </View>
  );
}

// Pantalla que recibe parametros
function PantallaDetalles({ route, navigation }) {
  const { itemId, titulo } = route.params;

  return (
    <View>
      <Text>Item ID: {itemId}</Text>
      <Button title="Volver" onPress={() => navigation.goBack()} />
    </View>
  );
}

Tab Navigator

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

const Tab = createBottomTabNavigator();

function AppTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Inicio') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Perfil') {
            iconName = focused ? 'person' : 'person-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Inicio" component={PantallaInicio} />
      <Tab.Screen name="Buscar" component={PantallaBuscar} />
      <Tab.Screen name="Perfil" component={PantallaPerfil} />
    </Tab.Navigator>
  );
}

Drawer Navigator

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        drawerStyle: {
          backgroundColor: '#fff',
          width: 240,
        },
      }}
    >
      <Drawer.Screen name="Inicio" component={PantallaInicio} />
      <Drawer.Screen name="Configuracion" component={PantallaConfig} />
      <Drawer.Screen name="Ayuda" component={PantallaAyuda} />
    </Drawer.Navigator>
  );
}

Navegacion Anidada

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="TabsInicio"
          component={AppTabs}
          options={{ headerShown: false }}
        />
        <Stack.Screen name="Modal" component={PantallaModal} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Metodos de Navegacion

// Navegar a pantalla
navigation.navigate('Detalles', { id: 1 });

// Push nueva instancia
navigation.push('Detalles', { id: 2 });

// Volver atras
navigation.goBack();

// Volver al inicio del stack
navigation.popToTop();

// Reemplazar pantalla actual
navigation.replace('OtraPantalla');

// Resetear el navegador
navigation.reset({
  index: 0,
  routes: [{ name: 'Inicio' }],
});