React-навигация отсутствует кнопка возврата

Question

Я новичок в работе с native и следую этому руководству из официальных документов по реакции на навигацию.https://reactnavigation.org/docs/en/auth-flow.html

У них есть действительно хороший живой пример: https://snack.expo.io/@react-navigation/auth-flow-v3

После входа в систему, когда вы нажимаете Show me more of the app from the home screen, вы переходите на страницу с кнопкой возврата.Просто глядя на код, я не могу понять, как они могут создать эту кнопку возврата.

Может быть, код не полный?

Я понимаю, что один из способов вернуться к кнопке «Назад» на навигационной панели - сделать что-то вроде:

headerLeft: (
  <Button
    onPress={() => alert('This is a button!')}
    title="Info"
    color="#fff"
  />
),

, но это отсутствует в отображаемом коде?

Answer 1

В React Navigation по умолчанию предусмотрена кнопка «Назад» для перехода к предыдущему экрану.

Поскольку у ios нет аппаратной кнопки «назад», все, что у них есть, - это жест, с которым они могут вернуться. и если он отключен, то нет возможности перейти к предыдущему экрану.

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

Таким образом, при наличии предыдущего экрана будет доступна кнопка «Назад», а если на экране, если в первом стеке, кнопка «Назад» не будет.

Допустим, у нас есть один навигатор-переключатель для экранов аутентификации, таких как SignIn, SignUp и т. Д., И один стековый навигатор для всех остальных экранов.

Таким образом, здесь переключатель навигатора по умолчанию имеет только один экран в стеке, поэтому ни на одном из этих экранов не будет кнопки «назад», потому что вы не можете вернуться назад, поскольку здесь есть тупик.

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

Answer 2

React Navigation уже имеет заголовок по умолчанию с кнопкой «Назад» при создании переключателя или стека навигатора.Свойство headerLeft используется только если вы хотите переопределить кнопку возврата по умолчанию.: D

Редактировать:

, чтобы очистить вещи.

Цель SwitchNavigator - показывать только один экран за раз.По умолчанию он не обрабатывает обратные действия и сбрасывает маршруты в их состояние по умолчанию при переключении.- переключить навигатор

, где стековый навигатор намеренно создает экран поверх стека (если у вас есть начальный экран).На начальном экране не будет заголовка с кнопкой назад, потому что он не знает, куда вернуться.Вот почему, когда вы переходите к «OtherStack», он создает новый экран с именем «OtherStack» в верхней части «HomeScreen».Вновь созданные экраны имеют заголовок по умолчанию с кнопкой «Назад», поэтому вы можете вернуться к исходному стеку.

const AppStack = createStackNavigator({ Home: HomeScreen, Other: OtherScreen });