Передача параметров между экранами — использование route и params

Работа с параметрами маршрута в React Navigation

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

Передача параметров в Stack Navigator

Пример: создаём два экрана — "Список пользователей" и "Детали пользователя".

Мы будем передавать ID пользователя из списка на экран деталей.

1. Настраиваем Stack Navigator:

   import React from "react";
   import { createNativeStackNavigator } from "@react-navigation/native-stack";
   import { NavigationContainer } from "@react-navigation/native";
   
   const Stack = createNativeStackNavigator();
   
   const App = () => {
     return (
       <NavigationContainer>
         <Stack.Navigator>
           <Stack.Screen name="UserList" component={UserListScreen} />
           <Stack.Screen name="UserDetails" component={UserDetailsScreen} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   };
   
   export default App;

2. Экран "Список пользователей" (UserListScreen):

   import React from "react";
   import { View, Text, Button } from "react-native";
   import { NativeStackScreenProps } from "@react-navigation/native-stack";
   
   // Типизируем параметры маршрутов
   type RootStackParamList = {
     UserList: undefined;
     UserDetails: { userId: string }; // Параметр userId для UserDetails
   };
   
   type Props = NativeStackScreenProps<RootStackParamList, "UserList">;
   
   const UserListScreen = ({ navigation }: Props) => {
     return (
       <View>
         <Text>Список пользователей:</Text>
         <Button
                 title="Показать пользователя 1"
                 onPress={() => navigation.navigate("UserDetails", { userId: "1" })}
         />
         <Button
                 title="Показать пользователя 2"
                 onPress={() => navigation.navigate("UserDetails", { userId: "2" })}
         />
       </View>
     );
   };
   
   export default UserListScreen;

3. Экран "Детали пользователя" (UserDetailsScreen):

   import React from "react";
   import { View, Text } from "react-native";
   import { NativeStackScreenProps } from "@react-navigation/native-stack";
   
   // Используем тот же RootStackParamList, что и в UserListScreen
   type RootStackParamList = {
     UserList: undefined;
     UserDetails: { userId: string };
   };
   
   type Props = NativeStackScreenProps<RootStackParamList, "UserDetails">;
   
   const UserDetailsScreen = ({ route }: Props) => {
     const { userId } = route.params; // Извлекаем параметр userId
     return (
       <View>
         <Text>Детали пользователя с ID: {userId}</Text>
       </View>
     );
   };
   
   export default UserDetailsScreen;

Объяснение кода

1. Типизация параметров:

   Мы создаём RootStackParamList, который описывает параметры всех экранов в приложении. Это помогает избежать ошибок при передаче данных между экранами.

2. Передача параметров:

   На экране "Список пользователей" мы вызываем navigation.navigate("UserDetails", { userId: "1" }), чтобы передать параметр userId.

3. Доступ к параметрам:

   На экране "Детали пользователя" мы используем route.params для получения переданного userId.

Использование useRoute для извлечения параметров

Можно упростить работу с параметрами, если использовать хук useRoute. Он особенно полезен, если вы работаете с функциональными компонентами.

Пример для "Детали пользователя":

import React from "react";
import { View, Text } from "react-native";
import { useRoute, RouteProp } from "@react-navigation/native";

// Используем RootStackParamList для типизации маршрута
type RootStackParamList = {
  UserList: undefined;
  UserDetails: { userId: string };
};

type UserDetailsRouteProp = RouteProp<RootStackParamList, "UserDetails">;

const UserDetailsScreen = () => {
  const route = useRoute<UserDetailsRouteProp>();
  const { userId } = route.params;

  return (
    <View>
      <Text>Детали пользователя с ID: {userId}</Text>
    </View>
  );
};

export default UserDetailsScreen;

Передача сложных объектов

Вместо одного параметра можно передать целый объект.

navigation.navigate("UserDetails", { user: { id: "1", name: "John Doe" } });

И потом извлечь его:

const { user } = route.params;
// user.id и user.name теперь доступны

Ошибки при передаче данных

1. Передача параметра, которого нет в типах: TypeScript сразу подскажет, если вы попытаетесь передать неизвестный параметр. Например:

   navigation.navigate("UserDetails", { unknownParam: "oops" }); // Ошибка!
   

2. Отсутствие параметра:

   Убедитесь, что все обязательные параметры переданы. Если параметр может быть необязательным, используйте ? в типах:

   type RootStackParamList = {
     UserDetails: { userId?: string };
   };
   

Практическое применение

Использование route и params встречается практически в любом реальном приложении. Вот несколько примеров:

• Передача ID товара в интернет-магазине.
• Передача данных о пользователе на экран чата.
• Отправка фильтров на экран результатов поиска.

Совет по стилям

Кастомизируйте заголовки экранов, чтобы они отображали переданные параметры. Например, добавьте имя пользователя в заголовок:

const UserDetailsScreen = ({ route, navigation }: Props) => {
  const { userId } = route.params;

  React.useLayoutEffect(() => {
    navigation.setOptions({ title: `Пользователь ${userId}` });
  }, [navigation, userId]);

  return (
    <View>
      <Text>Детали пользователя с ID: {userId}</Text>
    </View>
  );
};

Передача параметров в Bottom Tab Navigation

Хотя Bottom Tab Navigation в первую очередь используется для постоянных экранов с одинаковыми функциями, иногда может потребоваться передать параметры. Для этого можно использовать navigation.navigate со вторым параметром — объектом параметров.

2

Задача

Модуль 3: React, 22 уровень, 8 лекция

Недоступна

Передача простых параметров

Передача простых параметров

Открыть