Очистите свои URL-маршруты даже в мобильных приложениях с помощью библиотеки Expo Router.

Маршрутизация на основе файлов — это распространенный метод веб-разработки, который сопоставляет URL-адрес с определенным файлом в каталоге проекта. Эта система позволяет избежать сложных конфигураций маршрутизации, связанных с построением навигационных систем.

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

Новый взгляд на навигацию с помощью Expo Router

Маршрутизатор expo предоставляет решение декларативной маршрутизации для приложений React Native Expo. Эта система значительно отличается от того, как вы создать навигационную систему с помощью React Navigation. Expo Router решает серьезные проблемы с использованием текущей работающей навигационной системы.

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

instagram viewer

Файловая навигация/маршрутизация expo router — это простая система, которая хорошо работает и уже знакома разработчикам JavaScript и средам JavaScript, таким как Next.js, где вы можете определять маршруты.

Установка и настройка Expo Router

Достаточно просто перенести проект Expo со старой навигационной системы на использование маршрутизатора Expo.

Шаг 1: Установите Expo Router

Используйте эту команду терминала для запуска установщика expo-router:

npx expo установить экспо-маршрутизатор

Вам также необходимо убедиться, что вы установили эти одноранговые зависимости:

  • реагировать родной безопасный контекст области
  • реагировать на родные экраны
  • экспо-связь
  • экспо-статус-бар
  • реагировать-родной-жест-обработчик

Если какие-либо из них отсутствуют, вы можете установить их, запустив:

установка выставки npx

Шаг 2. Обновите точку входа

Создать новый index.js файл для замены существующего App.js точку входа и установить index.js как точка входа приложения внутри app.json:

// Установить index.js как точку входа
{
"основной": "index.js"
}
// Импортируем следующее внутри index.js
Импортировать"экспо-маршрутизатор/вход";

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

Определите схему внешних ссылок для своего приложения, добавив схема собственность на app.json:

{
"Экспо": {
"схема": "мое приложение"
 }
}

Шаг 4: Окончательная конфигурация

Последним шагом является настройка сборщика метро вашего приложения Expo и настройка Babel для поддержки Expo Router в вашем приложении.

Внутри Babel.config.js изменить существующий код, чтобы он выглядел следующим образом:

модуль.экспорт = функция (API) {
 API.кэш(истинный);
возвращаться {
 пресеты: ["babel-preset-expo"],
 плагины: [
требовать.решать("экспо-маршрутизатор/бабель"),
/* */
 ],
 };
};

Теперь перестройте и запустите приложение, запустив:

выставка npx --clear
2 изображения

Построение маршрутов вашего приложения с помощью Expo Router

Вы можете приступить к настройке потока навигации в приложение папка. index.js файл является вашей отправной точкой. Expo Router добавляет путь к каждому файлу, который вы создаете внутри приложение к системе маршрутизации приложения с глубокими ссылками URL для соответствия каждой странице.

Например, создайте Второй экран.js файл внутри приложение каталог и экспортировать компонент по умолчанию:

Импортировать {Таблица стилей, текст, вид} от"реагирующий натив";
Импортировать Реагировать от"реагировать";
константа Второй экран = () => {
возвращаться (


Второй экран</Text>
 </View>
 </View>
 );
};


экспортпо умолчанию второй экран;
константа стили = Таблица стилей.create({});

Вы можете перейти к этому экрану из index.js с использовать маршрутизатор () метод:

Импортировать {использовать маршрутизатор} от"экспо-маршрутизатор";
экспортпо умолчаниюфункцияСтраница() {
константа навигация = useRouter();


возвращаться (

Привет, мир </Text>
Это первая страница из ваше приложение.</Text>
 название =«Перейти к второму экрану»
 onPress={() => {
 навигация.push("/Второй Экран");
 }}
 />
 </View>
 );
}

Здесь вы назначаете маршрутизатор для навигации и используете его внутри элемента Button, вызывая navigation.push("/секунда"). Аргумент внутри push — это путь к файлу экрана, к которому вы хотите перейти.

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

Импортировать { Связь } от"экспо-маршрутизатор";
константа Второй экран = () => {
возвращаться (


Второй экран</Text>
"/" как ребенок>

Перейдите к index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Элемент link принимает свойство href для указания пути. Внутри приложения "/" путь соответствует входному файлу (index.js). Вторая опора asChild. Это свойство позволяет отображать первый дочерний компонент со всеми указанными реквизитами вместо компонента Link по умолчанию. Вы можете использовать это для настройки внешнего вида компонента Link или для реализации пользовательской логики маршрутизации.

Определение динамических маршрутов

С помощью динамических маршрутов вы можете динамически генерировать маршруты на основе определенных параметров или данных. Вместо определения фиксированного набора маршрутов вы получаете гибкость и адаптируемость в навигации вашего приложения.

Чтобы начать использовать динамические маршруты в Expo Router, вам необходимо определить маршруты для обработки динамического контента. Вы можете использовать параметризованные маршруты, указав заполнители в пути маршрута. Значения этих заполнителей будут доступны для вашего маршрута, когда кто-то перейдет к нему.

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

// приложение/маршруты/BlogPost.js
Импортировать Реагировать от"реагировать";
Импортировать {использовать маршрутизатор} от"экспо-маршрутизатор";
константа Сообщение в блоге = ({ маршрут }) => {
константа {postId} = route.params;


возвращаться (

Отображение сообщения в блоге с Идентификатор: {postId}</Text>
 </View>
 );
};
экспортпо умолчанию Сообщение блога;

В этом примере вы определяете компонент динамического маршрута с именем Сообщение блога. route.params объект позволяет вам получить доступ к значениям параметров, переданным в маршрут. В этом случае вы получаете доступ к postId параметр для отображения соответствующей записи в блоге.

Создание динамических маршрутов

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

Вот пример:

// приложение/компоненты/BlogList.js
Импортировать Реагировать от"реагировать";
Импортировать {использовать навигацию} от"экспо-маршрутизатор";
константа Список блогов = ({ Сообщения в блоге }) => {
константа навигация = использоватьНавигация();


константа Навигация по блогу = (postId) => {
 навигация.навигация("Сообщение блога", {Идентификатор поста});
 };


возвращаться (

 {blogPosts.map((почта) => (
 ключ = {post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{сообщение.название}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
экспортпо умолчанию Список блогов;

В этом примере вы перебираете Сообщения в блоге массив и визуализировать Компонент для каждого поста. Когда вы нажимаете пост, НавигацияToBlogPost функция запускается, передавая postId к навигационному маршруту.

Обработка динамических маршрутов

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

Например:

// приложение/маршруты/BlogPost.js
Импортировать Реагировать от"реагировать";
Импортировать { Маршрут, useFocusEffect } от"экспо-маршрутизатор";
константа Сообщение в блоге = ({ маршрут }) => {
константа {postId} = route.params;


 использоватьFocusEffect(() => {
// Получаем данные поста блога на основе postId
// Выполняем любые другие необходимые действия в фокусе
 });


возвращаться (

Отображение сообщения в блоге с Идентификатор: {postId}</Text>
 </View>
 );
};
экспортпо умолчанию Сообщение блога;

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

Навигация по динамическим маршрутам

Чтобы перейти к динамическому маршруту, вы можете использовать методы навигации, предоставляемые Expo Router.

Например, для перехода к Сообщение блога компонент с определенным postId, вы можете использовать навигация.навигация метод:

// приложение/компоненты/BlogList.js
Импортировать Реагировать от"реагировать";
Импортировать {использовать навигацию} от"экспо-маршрутизатор";
константа Список блогов = ({ Сообщения в блоге }) => {
константа навигация = использоватьНавигация();


константа Навигация по блогу = (postId) => {
 навигация.навигация("Сообщение блога", {Идентификатор поста});
 };


возвращаться (

 {blogPosts.map((почта) => (
 ключ = {post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{сообщение.название}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
экспортпо умолчанию Список блогов;

Когда вы нажимаете запись в блоге, НавигацияToBlogPost функция сработает с postId.

Expo Router помогает структурировать нативные приложения

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

Вы изучили функции Expo Router, изучили основные концепции маршрутизации и узнали, как создавать динамические маршруты. С помощью Expo Router вы можете создавать динамические потоки навигации, обрабатывать различные данные или пользовательский ввод, а также персонализировать навигацию в своем приложении.