React Navigation

La navegación en apps móviles es diferente a la navegación web. En mobile hay tres patrones principales: Stack Navigator (pantallas apiladas como páginas de historial, con animación de slide al avanzar y retroceder), Tab Navigator (pestañas en la parte inferior de la pantalla como Instagram o WhatsApp), y Drawer Navigator (menú lateral que se desliza desde el borde, como Gmail). React Navigation es la librería estándar que implementa los tres con animaciones nativas.

React Navigation 6 usa una API declarativa similar a React Router. Defines las rutas con componentes, y la navegación ocurre con navigation.navigate("NombrePantalla") o navigation.push(). Los parámetros se pasan como segundo argumento y se leen con route.params. Una app real típicamente tiene todos los patrones anidados: una Tab Navigator con tres tabs, donde cada tab tiene su propio Stack Navigator para las pantallas de detalle de esa sección.

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

// Stack Navigator
function StackPrincipal() {
  return (
    <Stack.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: "#0A0F1E" },
        headerTintColor: "#00E5A0",
      }}
    >
      <Stack.Screen name="Inicio" component={InicioScreen} />
      <Stack.Screen name="Detalle" component={DetalleScreen} />
    </Stack.Navigator>
  );
}

// Tab Navigator
function TabPrincipal() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          const icons = { Inicio: "home", Perfil: "person", Config: "settings" };
          return <Ionicons name={icons[route.name]} size={size} color={color} />;
        },
        tabBarActiveTintColor: "#00E5A0",
        tabBarStyle: { backgroundColor: "#141B2E" },
      })}
    >
      <Tab.Screen name="Inicio" component={StackPrincipal} />
      <Tab.Screen name="Perfil" component={PerfilScreen} />
    </Tab.Navigator>
  );
}

// Navegación en componentes
function InicioScreen({ navigation, route }) {
  return (
    <View>
      <TouchableOpacity
        onPress={() => navigation.navigate("Detalle", { id: 123 })}
      >
        <Text>Ir al detalle</Text>
      </TouchableOpacity>
    </View>
  );
}

function DetalleScreen({ route }) {
  const { id } = route.params; // Parámetros recibidos
  return <Text>Detalle #{id}</Text>;
}