Модальные экраны

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

Настройка модального представления

Для включения модального режима используется опция presentation: 'modal'. Её можно применить либо ко всему стеку, либо к отдельному экрану.

Применение ко всему стеку (обычно для отдельного модального навигатора):

<Stack.Navigator screenOptions={{ presentation: 'modal' }}>
  <Stack.Screen name="CreatePost" component={CreatePostScreen} />
</Stack.Navigator>

Применение к одному экрану:

<Stack.Screen
  name="EditProfile"
  component={EditProfileScreen}
  options={{ presentation: 'modal' }}
/>

Поведение на разных платформах

  • На iOS модальный экран появляется снизу как лист (sheet) и может быть закрыт свайпом вниз.
  • На Android модальное окно выглядит как обычный экран, но с затемнённым фоном и анимацией входа/выхода, отличающейся от стандартной.

Управление модальным экраном

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

  • navigation.navigate('EditProfile') — открытие.
  • navigation.goBack() или navigation.dismiss() — закрытие (на iOS dismiss() предпочтительнее для модальных экранов).

Типичные сценарии использования

  • Создание или редактирование записи.
  • Подтверждение удаления или другого критического действия.
  • Настройки, не требующие постоянного доступа из основного интерфейса.

Модальные экраны следует использовать умеренно — только для задач, которые логически отделены от основного пользовательского потока.