Использование React Navigation в Expo приложении

Использование React Navigation в Expo приложении

Очередной повод поныть по поводу React Native и того, что тут багов больше, чем работающего функционала.

Я решил добавить окно с подсказкой в приложение. Одним из самых популярных решений для навигации в React Native (Expo) является React Navigation.

Если верить документации, то все должно быть крайне просто и легко. При этом, будет даже поддерживаться кнопка «назад» на вашем телефоне. Мне показалось это прикольным. Итак, перейдем к тому что и как я делал.

Как настроить роутинг с React Navigation

В React Navigation вы найдете несколько вариантов того, как можно организовывать роутинг в вашем приложении — создание вкладок, реализацию стэка и т.д.

В моем случае, я решил выбрать StackNavigator — т.е. каждый новый роут «наслаивается» на придыдущий. В результате, мы получаем стэк из наших переходов. Тут же у вас появляется и кнопка Back, и возможность скинуть всю историю до какого-то шага (например, перейти на 3 назад) или вообще полностью (вернуться к первому скрину).

Итак, чтобы сделать StackNavigator нам нужно:

1) импортировать наши зависимости: import { createStackNavigator, createAppContainer } from ‘react-navigation’;

2) Далее мы создаем непосредственно компонент, в котором будет реализовываться роутинг с помощью createStackNavigator.

Функция createStackNavigator принимает 2 параметра — объект с набором роутов и их настройками, а так же объект представляющий из себя настройки для всех роутов.

Например, по умолчанию StackNavigator создает «header» в вашем приложении. Но вы можете его кастомизировать или вообще удалить.

Чтобы удалить header в React Navigation вам нужно в объект настроек createStackNavigator передать объект вида {headerMode: ‘none’}.

Ну а объект с роутами выглядит как { Home: { screen: MainScreen}, Help: { screen: HelpScreen } }. Здесь мы тоже можем кроме «screen» задавать и другие настройки, которые будут применены к конкретному роуту.

В итоге, чтобы получить компонент с роутингом мы делаем:
const NavigationApp = createStackNavigator({…}, {…});

Таким образом в NavigationApp у нас будет лежать компонент с StackNavigator роутингом.

Еще один элемент, который мы импортировали — это createAppContainer. С помощью createAppContainer мы поставляем все необходимые параметры в наш NavigatorApp.
export default createAppContainer(NavigationApp);

Теперь, во всех элементах, которые были переданы в createStackNavigator будут новые props — navigation. Для того, чтобы выполнять перемещения по роутам есть следующие варианты:

  • this.props.navigation.navigate(‘routeName’)
  • this.props.navigation.push(‘routeName’)
  • this.props.navigation.goBack()
  • this.props.navigation.reset(…)

С чем возникают проблемы

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

Я перепробовал и все варианты (navigate, push, goBack), и использование физической кнопки «назад» — ничего вообще не помогает.

И тут React Navigation идет в лучших традициях Expo и React Native — у него тоже есть ошибки, которые открыты до сих пор, хотя ошибки были заведены еще в 2017 году (пример).

Стоит заметить, что React Navigation — это js решение, построенное на основе React Native, так что в нем есть все баги из «основы» + еще добавляются и свои собственные.

Вывод: Пытаюсь создать простейшее приложение на Expo (react native) и натыкаюсь на постоянные баги просто на каждом шагу и каждом элементе. А еще иногда и нет возможности конфигураций, нужно делать eject и потом разбираться с java, чтобы у тебя хоть что-то работало. Пока мне кажется, что если вам нужно нормальное приложение — то возьмите java/swift программиста и не морочьте себе голову. А React Native оставьте для извращенцев, которые думают, что использование css свойств в создании компонентов резко ускорят разработку вашего приложения.

Очень хочется доделать хоть один pet-project. Так что я еще продолжу свои мучения с React Native (expo) и еще добавлю чуть постов, так что ожидайте обновлений 😉

А пока могу посоветовать еще глянуть на этапы жизненного цикла в React, шпаргалка по React Native, про безопастность и CSRF.

Так же, тут у меня много отзывов и про посещение разных городов и стран — обзор Копенгагена, мой опыт посещения Унаватуны и Коломбо, Мыс Рока, прогулки по Лиссабону.