Учись один раз, пиши где угодно

Я очень рад объявить о проекте, над созданием которого шло несколько месяцев, react-router-native, библиотеки маршрутизации для React Native, которая стремится к разумному паритету API с react- роутер .

Этот проект родился из-за моего разочарования при поиске маршрутизатора для использования с React Native. К сожалению, сам React Router не поддерживает React Native, а команда NavigationExperimental не намерена поддерживать React Router -подобный интерфейс. Это оставляет состояние навигации на усмотрение разработчика. Каким бы замечательным ни был NavigationExperimental, это слишком низкий уровень для людей, которые хотят сосредоточиться на реальных проблемах своих приложений, а не на незначительных деталях управления состоянием навигации. Низкоуровневый характер NavigationExperimental предназначен только для того, чтобы позволить создавать большие абстракции на более высоких уровнях.

Цели

Основные цели React Router Native:

  • Разработка на основе URL
  • Учите один раз, пишите где угодно: знания и проверенные идиомы из React Router можно повторно использовать, расширяя их по мере необходимости, чтобы обеспечить семантику навигации, уникальную для собственных платформ.
  • Первоклассная поддержка глубоких ссылок
  • Кроссплатформенность

Декларативный API устраняет необходимость писать шаблонный код и значительно ускоряет разработку собственных приложений. React Router неплохо справился с этим в Интернете. Следуя принципу React «учись один раз, пиши где угодно», я подумал, что лучшим подходом к созданию подобной абстракции будет объединение концепций React Router, или, скорее, React Router, как и в NavigationExperimental.

React Router Native - продукт этого союза. Он предоставляет расширенный набор API React Router, использует React Router для рендеринга компонентов навигации и делегирует рендеринг пользовательских компонентов NavigationExperimental, и все это без забирая контроль - так что у вас по-прежнему есть доступ к функциям NavigationExperimental для создания всевозможных причудливых анимаций перехода, если это то, что вам нужно.

Фреймворк агностик

Поскольку React Router Native управляет состоянием навигации за вас, вам не нужно писать редукторы для каждой сцены, которую вы хотите визуализировать. Фактически, если вы не являетесь специалистом по Redux, вам даже не нужно знать, что такое reducer, чтобы начать использовать React Router Native.

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

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

Адресная строка

Я признаю, что экосистема нативных приложений не похожа на веб, и вы можете возразить, что URL-адреса не нужны. Но я думаю, что большинство людей воспринимают URL-адреса как должное, и их преимущества не так очевидны.

React Router Native поощряет разработку на основе URL-адресов. Не так уж удивительно, что это первоклассная поддержка глубоких ссылок. В React Router Native вы можете переключить опору на своем Router, чтобы перейти в режим разработки. Это помещает адресную строку над вашим приложением и создает среду, подобную браузеру.

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

Аппаратная кнопка возврата

React Router Native предоставляет разумные настройки по умолчанию для обработки пользователем нажатия аппаратной кнопки возврата на устройстве Android. Это работает волшебным образом без ручного труда с вашей стороны. Когда поведение по умолчанию вам не подходит, оно также предоставляет вам необходимые хуки для настройки поведения аппаратной кнопки возврата.

Заключительные примечания

Мы все еще находимся на первых этапах развития React Native и NavigationExperimental, пытаясь понять правильные абстракции. Навигация на мобильных устройствах - сложная задача, и, на мой взгляд, использование разных вариантов только полезнее, поскольку сообщество взвешивает плюсы и минусы каждого подхода, а не строит догадки перед лучшими практиками.

Что касается React Router Native, то он тоже находится на очень ранней стадии, и это сделано намеренно. Я надеюсь вовлечь сообщество в формирование направления проекта. Некоторые члены сообщества уже присоединились, чтобы помочь, и вы тоже должны.

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

Райан Флоренс @ryanflorence, Майкл Джексон @mjackson, Эрик Висенти @ericvicenti и Хеджер Ван @hedgerwang

Если у вас есть вопросы, не стесняйтесь обращаться к нам в Twitter, @jmurzy.

Вы также можете зайти в Проблемы Github и начать разговор.

🍺

-Джейк

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