React Native – это популярная платформа для создания мобильных приложений, а навигация — важнейший аспект взаимодействия с пользователем любого приложения. В этой статье мы рассмотрим различные методы управления навигацией с использованием реквизитов в React Native с TypeScript. Независимо от того, являетесь ли вы новичком или имеете некоторый опыт работы с React Native, это руководство предоставит вам полное представление о навигационных реквизитах и ​​о том, как эффективно их использовать в ваших проектах.

Понимание навигационных реквизитов.
Навигационные реквизиты используются для передачи данных и функций между различными экранами или компонентами в приложении React Native. Они позволяют нам контролировать процесс навигации, обрабатывать взаимодействия с пользователем и обновлять пользовательский интерфейс в зависимости от действий пользователя.

Метод 1: передача реквизитов для навигации
Самый простой способ навигации между экранами — передача реквизитов компоненту целевого экрана. Давайте рассмотрим пример, где у нас есть два экрана: HomeScreen и DetailsScreen.

// HomeScreen.tsx
import React from 'react';
import { Button } from 'react-native';
const HomeScreen = ({ navigation }) => {
  const onPress = () => {
    navigation.navigate('Details', { itemId: 42 });
  };
  return (
    <Button title="Go to Details" onPress={onPress} />
  );
};
export default HomeScreen;

// DetailsScreen.tsx
import React from 'react';
import { Text } from 'react-native';
const DetailsScreen = ({ route }) => {
  const { itemId } = route.params;
  return (
    <Text>Item ID: {itemId}</Text>
  );
};
export default DetailsScreen;

В этом примере мы передаем свойство navigationкомпоненту HomeScreenи используем его для перехода к DetailsScreen, вызывая navigation.navigate('Details', { itemId: 42 }). Мы также получаем доступ к переданным реквизитам в компоненте DetailsScreenс помощью route.params.itemId.

Метод 2: использование крючков навигации
React Navigation предоставляет хуки, которые упрощают процесс навигации. Давайте перепишем наш пример, используя хуки useNavigationи useRoute.

// HomeScreen.tsx
import React from 'react';
import { Button } from 'react-native';
import { useNavigation } from '@react-navigation/native';
const HomeScreen = () => {
  const navigation = useNavigation();
  const onPress = () => {
    navigation.navigate('Details', { itemId: 42 });
  };
  return (
    <Button title="Go to Details" onPress={onPress} />
  );
};
export default HomeScreen;

// DetailsScreen.tsx
import React from 'react';
import { Text } from 'react-native';
import { useRoute } from '@react-navigation/native';
const DetailsScreen = () => {
  const route = useRoute();
  const { itemId } = route.params;
  return (
    <Text>Item ID: {itemId}</Text>
  );
};
export default DetailsScreen;

Используя хуки useNavigationи useRoute, мы можем получить доступ к объекту навигации и параметрам маршрута напрямую, не передавая их в качестве реквизита.

В этой статье мы рассмотрели два метода обработки навигации с использованием реквизитов в React Native с помощью TypeScript. Передавая реквизиты для навигации или используя навигационные хуки, вы можете эффективно управлять потоком навигации в своем приложении. Обязательно выберите подход, который лучше всего соответствует требованиям вашего проекта и стилю кодирования. Приятного кодирования!