---
title: "Навигация онбординга"
description: "Настройте статическую и динамическую навигацию в конструкторе онбординга Adapty без кода для управления потоком пользователей."
---

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

## Настройка навигации \{#set-up-navigation\}

Вы можете настроить статическую и динамическую навигацию, а также закрытие онбординга, с помощью [кнопок](onboarding-buttons) и [квизов](onboarding-quizzes).

:::info
Для квизов только квизы с одним вариантом ответа подходят для навигации. Квизы с несколькими вариантами ответа можно использовать для настройки [условной видимости элементов](onboarding-element-visibility).
:::

### Статическая навигация \{#static-navigation\}

Статическая навигация направляет пользователей на один и тот же целевой экран. Чтобы её настроить:
1. Добавьте кнопку или квиз с одним вариантом ответа.
2. Выберите кнопку или квиз и перейдите на вкладку **Element** справа.
3. Настройте раздел **On Press** для кнопки или **Behaviour** для квиза:
- **Action on** (только для квиза): выберите **Option**, чтобы открыть настройки навигации для квиза.
- **Action**: выберите **Navigate**.
- **Data**: выберите **Static**, чтобы направлять пользователей на один и тот же целевой экран.
- **Destination**: выберите целевой экран.

:::note
При статической навигации квиз направляет пользователей на один и тот же экран вне зависимости от выбранного ответа.
:::

  <img src="/assets/shared/img/static-navigation.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Динамическая навигация \{#dynamic-navigation\}

Динамическая навигация направляет пользователей в зависимости от их ответов в квизе:
- **Ответы квиза на предыдущих экранах**: навигацию могут запускать как кнопки, так и квизы с одним вариантом ответа.
- **Ответы квиза на текущем экране**: навигацию могут запускать только квизы с одним вариантом ответа.

Чтобы её настроить:
1. Добавьте кнопку или квиз с одним вариантом ответа, который будет осуществлять навигацию.
2. Выберите кнопку или квиз и перейдите на вкладку **Element** справа.
3. Настройте раздел **On Press** для кнопки или **Behaviour** для квиза:
- **Action on** (только для квиза): выберите **Option**, чтобы открыть настройки навигации для квиза.
- **Action**: выберите **Navigate**.
- **Data**: выберите **Dynamic**, чтобы направлять пользователей на основе их предыдущих ответов в квизе.
- **State**: выберите квиз, ответы которого определяют пункт назначения пользователя.
4. Выберите целевой экран для каждого варианта ответа квиза.

Ваша кнопка или квиз будут динамически направлять пользователей к настроенным вами пунктам назначения.

  <img src="/assets/shared/img/dynamic-navigation.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>

### Закрытие онбординга \{#onboarding-closure\}

Если пользовательский путь предполагает закрытие онбординга, вы можете настроить это с помощью кнопок или квизов с одним вариантом ответа:

1. Добавьте кнопку или квиз с одним вариантом ответа.
2. Выберите кнопку или квиз и перейдите на вкладку **Element** справа.
3. Настройте раздел **On Press** для кнопки или **Behaviour** для квиза:
- **Action on** (только для квиза): выберите **Option**, чтобы открыть настройки навигации для квиза.
- **Action**: выберите **Close onboarding**.

Узнайте, как обрабатывать закрытие онбординга на [iOS](ios-handling-onboarding-events#closing-onboarding), [Android](android-handle-onboarding-events#closing-onboarding), [React Native](react-native-handling-onboarding-events#closing-onboarding) и [Flutter](flutter-handling-onboarding-events#closing-onboarding).

  <img src="/assets/shared/img/close-onboarding.png"
  style={{
    border: '1px solid #727272', /* border width and color */
    width: '700px', /* image width */
    display: 'block', /* for alignment */
    margin: '0 auto' /* center alignment */
  }}
/>