10. React Navigation: Введение

React Navigation — стандартная библиотека навигации для React Native. Поддерживает Stack, Tab, Drawer навигаторы и их комбинации.

Установка

# Базовые зависимости
npx expo install @react-navigation/native

# Зависимости для Expo
npx expo install react-native-screens react-native-safe-area-context

# Навигаторы (устанавливай нужные)
npx expo install @react-navigation/native-stack      # Stack
npx expo install @react-navigation/bottom-tabs       # Tabs
npx expo install @react-navigation/drawer            # Drawer

Структура навигации

// App.tsx — корневой файл
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Навигация между экранами

// В компоненте экрана
import { useNavigation } from '@react-navigation/native';

export default function HomeScreen() {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      onPress={() => navigation.navigate('Details', { id: 42 })}
    >
      <Text>Открыть детали</Text>
    </TouchableOpacity>
  );
}

Получение параметров

import { useRoute } from '@react-navigation/native';

export default function DetailsScreen() {
  const route = useRoute();
  const { id } = route.params;  // Параметры из navigate()

  return <Text>ID: {id}</Text>;
}

TypeScript типизация

types.ts

export type RootStackParamList = {
  Home: undefined;
  Details: { id: number; title?: string };
  Profile: { userId: string };
};

// В навигаторе
const Stack = createNativeStackNavigator<RootStackParamList>();

// В компоненте
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

type HomeScreenNavigationProp = NativeStackNavigationProp<
  RootStackParamList,
  'Home'
>;

const navigation = useNavigation<HomeScreenNavigationProp>();

Expo Router — альтернатива

Expo Router использует файловую систему вместо конфигурации:

app/
├── index.tsx          → /
├── details/[id].tsx   → /details/123
├── (tabs)/
│   ├── _layout.tsx    → Tab навигация
│   ├── home.tsx       → /home
│   └── settings.tsx   → /settings
└── modal.tsx          → /modal

app/details/[id].tsx

import { useLocalSearchParams } from 'expo-router';

export default function Details() {
  const { id } = useLocalSearchParams();
  return <Text>ID: {id}</Text>;
}

// Навигация
import { Link, router } from 'expo-router';

<Link href="/details/42">Детали</Link>
router.push('/details/42');
router.back();

Hooks навигации

const navigation = useNavigation();
const route = useRoute();
const isFocused = useIsFocused();        // Экран в фокусе?
const focus = useFocusEffect(callback);  // Вызов при фокусе

// Lifecycle события
useEffect(() => {
  const unsubscribe = navigation.addListener('focus', () => {
    // Экран стал видимым
  });
  return unsubscribe;
}, [navigation]);