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

Используя React Navigation, каждый экранный компонент в вашем приложении автоматически получает доступ к маршруту и навигационному реквизиту. Реквизит route содержит информацию о текущем маршруте в иерархии компонентов. Навигационный реквизит занимается диспетчеризацией навигационных действий для других экранных компонентов.

В этой статье мы рассмотрим реквизиты route и navigation библиотеки React Navigation, их элементы, а также то, как использовать функцию .navigate, содержащуюся в реквизите navigation, для передачи параметров (params) при навигации между различными экранами приложения.

Предварительные условия

Эта статья предполагает, что у вас есть базовые знания о React Native и о том, как правильно настроить стековый навигатор с помощью библиотеки React Navigation.

Вы можете подтянуть знания по обеим темам, посетив их официальную документацию:

• Основы React Native
• Настройка стекового навигатора

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

navigation.navigate( )

Навигационный реквизит, предоставляемый навигатором стека React Navigation, представляет собой объект, содержащий различные функции для диспетчеризации определенных действий. Одна из них — функция .navigate, которая используется для навигации и последовательной передачи данных param на другие экраны вашего приложения.

Хотя навигационный реквизит предоставляется автоматически, для доступа к его функциям вам необходимо получить его в качестве аргумента на каждом компоненте экрана, определенном в навигаторе стека. Затем, просто вызывая его следующим образом: navigation.navigate( ) вы можете передать имя маршрута экрана для перехода к нему и объект param для переноса в маршрут.

import { Button, View } from "react-native";
import React from "react";

const HomeScreen = (props) => {
  return (
    <View>
      <Button
        title="Button"
        onPress={() => props.navigation.navigate("ScreenRouteName", {params})}
      />
    </View>
  );
};

export default HomeScreen;

Используя синтаксис Javascript 2015 ES6, вы можете деструктурировать объект props, чтобы взять только объект navigation. Поскольку это единственный объект реквизита, который здесь необходим.

//Your code will then look like this 
const HomeScreen = ({navigation}) => {
        console.log(navigation);
    ...
    onPress={() => navigation.navigate("ScreenRouteName", {params})}
    ...
};

Если воспользоваться консолью console.log(navigation), то можно увидеть все базовые функции, доступные в объекте navigation prop.

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

Вы можете импортировать хук useNavigation, предоставляемый React Navigation версии 6.0, в такой дочерний компонент и присвоить его константе. Затем вызовите эту константу в реквизите onPress с помощью .navigate( ).

Здесь константа названа navigation, потому что это имеет смысл и позволяет избежать путаницы.

import { View, Button } from "react-native";
import React from "react";
import { useNavigation } from "@react-navigation/native";

const NavigationButton = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Button
        title ="Button" 
        onPress={() => navigation.navigate("screenRouteName", {params})} 
      />
    </View>
  );
};

export default NavigationButton;

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

После передачи параметра связанный с ним экран компонента будет готов его принять. Как уже говорилось ранее, параметр route param, автоматически предоставляемый каждому экрану в навигаторе стека, содержит некоторую информацию о текущем экране компонента. Он содержит объект params, который предоставляет доступ ко всем параметрам, передаваемым компоненту.

Таким образом, чтобы прочитать доступные параметры, достаточно получить этот route prop в качестве аргумента компонента.

//HomeScreen
import { View, Text } from "react-native";
import React from "react";

const HomeScreen = ({route}) => {

//ES6 object destructuring
const {Param Name}= route.params;

  return (
    <View>
      <Text>{Param Name}</Text>
    </View>
  );
};

export default HomeScreen;

Важно помнить о том, какие данные передаются в качестве параметров. Это должны быть только данные, конфигурирующие то, что будет отображаться на экране. Например, в потоке аутентификации пользователя в качестве параметра в идеале должен передаваться идентификатор пользователя, чтобы решить, данные какого пользователя будет показывать ваше приложение.

navigation.setParams( )

Еще одна функция, вложенная в объект navigation prop, — это функция setParams. Она полезна, если вам нужно обновить полученный параметр экрана. Подобно тому, как вы обновляете состояние компонентов с помощью хука useState, функция setParams неглубоко объединяет переданные параметры с текущими и возвращает новый результат.

//HomeScreen
import { View, Button } from "react-native";
import React from "react";

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Button
        title="SecondScreen"
        onPress={() => navigation.navigate("SecondScreen", {text: "hello"})}
      />
    </View>
  );
};

export default HomeScreen;

//SecondScreen
import { Text, View, Button } from "react-native";
import React from "react";

const SecondScreen = ({ route, navigation }) => {
  const {text} = route.params;
  return (
    <View>
      <Text style={{ fontSize: 30 }}>{text} World!</Text>
      <Button
        title="change text"
    //Calling setParams
        onPress={() => navigation.setParams({text: "hey"})}
      />
    </View>
  );
};

export default SecondScreen;

Вызывая navigation.setParams( ), вы изменяете полученный параметр text:

Заключение

В этой заметке вы узнали о реквизитах маршрута и навигации, предоставляемых компоненту экрана библиотекой React Navigation. Вы также узнали, как передавать параметры экрану маршрута с помощью реквизита навигации и как обращаться к реквизиту маршрута для чтения данных параметров текущего экрана маршрута. Наконец, вы узнали, как использовать функцию set params для изменения текущего переданного параметра в компоненте.

На этом мы завершаем эту статью!