Почистете вашите URL маршрути, дори в мобилни приложения, като използвате библиотеката Expo Router.

Базираното на файлове маршрутизиране е често срещана техника за уеб разработка, която нанася URL път към конкретен файл в директория на проект. Тази система избягва сложните конфигурации на маршрута, свързани с изграждането на навигационни системи.

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

Преосмислена навигация с Expo Router

Експо рутерът предоставя декларативно решение за маршрутизиране за приложения на React Native Expo. Тази система е значително по-различна от вашата изградете навигационна система, използвайки React Navigation. Expo Router има големи проблеми с използването на текущата работеща навигационна система.

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

instagram viewer

Базираната на файла навигация/маршрутизация на експо рутера е проста система, която работи добре и вече е позната сред разработчиците на JavaScript и JavaScript рамки като Next.js, където можете да дефинирате маршрути.

Инсталиране и настройка на Expo Router

Доста лесно е да мигрирате вашия Expo проект от старата навигационна система към използване на Expo рутер.

Стъпка 1: Инсталирайте Expo Router

Използвайте тази терминална команда, за да стартирате инсталатора на expo-router:

npx expo инсталирайте експо-рутер

Също така ще трябва да се уверите, че сте инсталирали тези партньорски зависимости:

  • реагират-нативна-безопасна-зона-контекст
  • реагират на родни екрани
  • експо-връзка
  • експо-статус-лента
  • манипулатор на жестове за реагиране

Ако такива липсват, можете да ги инсталирате, като изпълните:

npx expo инсталиране

Стъпка 2: Актуализирайте входната точка

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

// Задайте index.js като входна точка
{
"основен": "index.js"
}
// Импортирайте следното в index.js
импортиране"експо-рутер/вход";

Expo Router използва a дълбока връзка схема за определяне кой екран или съдържание да се отвори при маршрутизиране.

Дефинирайте схема за дълбоко свързване за вашето приложение, като добавите a схема собственост към app.json:

{
"експо": {
"схема": "myapp"
 }
}

Стъпка 4: Окончателна конфигурация

Последната стъпка е да настроите metro bundler на вашето приложение Expo и да конфигурирате Babel да поддържа Expo Router във вашето приложение.

Вътре babel.config.js променете съществуващия код, за да изглежда така:

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

Сега изградете отново и стартирайте приложението си, като изпълните:

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

Изграждане на маршрути на вашето приложение с Expo Router

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

Например създайте a SecondScreen.js файл вътре в ап директория и експортирайте компонент по подразбиране:

импортиране {Стилова таблица, текст, изглед} от"реагиране-роден";
импортиране Реагирайте от"реагира";
конст Втори екран = () => {
връщане (


Втори екран</Text>
 </View>
 </View>
 );
};


износпо подразбиране SecondScreen;
конст стилове = StyleSheet.create({});

Можете да навигирате до този екран от index.js с useRouter() метод:

импортиране {useRouter} от"експо-рутер";
износпо подразбиранефункцияСтраница() {
конст навигация = useRouter();


връщане (

Здравей свят</Text>
Това е първата страница на вашето приложение.</Text>
 заглавие=„Навигирайте до SecondScreen“
 onPress={() => {
 navigation.push("/SecondScreen");
 }}
 />
 </View>
 );
}

Тук присвоявате рутера за навигация и го използвате вътре в елемента Button чрез извикване navigation.push("/секунда"). Аргументът в push е пътя на файла на екрана, до който искате да отидете.

Вътре SecondScreen можете също да навигирате до индексния екран по този начин:

импортиране { Връзка } от"експо-рутер";
конст Втори екран = () => {
връщане (


Втори екран</Text>
"/" като дете>

Отидете до index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Елементът на връзката приема атрибут href, за да посочи пътя. Вътре в приложението, "/" пътят съответства на входния файл (index.js). Вторият реквизит е asChild. Тази подложка ви позволява да изобразите първи дъщерен компонент с всички посочени подпори вместо компонента Link по подразбиране. Можете да използвате това, за да персонализирате външния вид на компонента Link или да приложите персонализирана логика за маршрутизиране.

Дефиниране на динамични маршрути

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

За да започнете да използвате динамични маршрути в Expo Router, трябва да дефинирате маршрутите за обработка на динамично съдържание. Можете да използвате параметризирани маршрути, като посочите контейнери в пътя на маршрута. След това стойностите за тези заместители ще бъдат достъпни за вашия маршрут, когато някой навигира до него.

Например, помислете за приложение за блогове, където искате да показвате отделни публикации в блогове. Можете да определите динамичен маршрут за обработка на всяка от публикациите в блога:

// app/routes/BlogPost.js
импортиране Реагирайте от"реагира";
импортиране {useRouter} от"експо-рутер";
конст Публикация в блог = ({маршрут}) => {
конст { postId } = route.params;


връщане (

Показване на публикация в блог с ID: {postId}</Text>
 </View>
 );
};
износпо подразбиране Блог пост;

В този пример дефинирате компонент на динамичен маршрут с име Блог пост. The route.params обект ви позволява достъп до стойностите на параметрите, предадени на маршрута. В този случай имате достъп до a postId параметър за показване на съответната публикация в блога.

Генериране на динамични маршрути

Сега, след като имате дефиниран динамичен маршрут, можете да генерирате маршрути динамично въз основа на данни или потребителски вход. Например, ако имате списък с публикации в блогове, извлечени от API, можете динамично да генерирате маршрути за всяка публикация в блог.

Ето един пример:

// приложение/компоненти/BlogList.js
импортиране Реагирайте от"реагира";
импортиране {useNavigation} от"експо-рутер";
конст BlogList = ({ blogPosts }) => {
конст навигация = useNavigation();


конст navigateToBlogPost = (postId) => {
 navigation.navigate("Блог пост", { postId });
 };


връщане (

 {blogPosts.map((пост) => (
 ключ={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
износпо подразбиране BlogList;

В този пример вие итерирате върху blogPosts масив и изобразяване на a компонент за всяка публикация. Когато натиснете публикация, navigateToBlogPost функцията се изпълнява, преминавайки на postId към навигационния маршрут.

Обработка на динамични маршрути

Можете да слушате навигационни събития, специфични за динамичен маршрут, като използвате useFocusEffect кука.

Например:

// app/routes/BlogPost.js
импортиране Реагирайте от"реагира";
импортиране { Маршрут, useFocusEffect } от"експо-рутер";
конст Публикация в блог = ({маршрут}) => {
конст { postId } = route.params;


 useFocusEffect(() => {
// Извличане на данни за публикация в блог въз основа на postId
// Извършете всички други необходими действия на фокус
 });


връщане (

Показване на публикация в блог с ID: {postId}</Text>
 </View>
 );
};
износпо подразбиране Блог пост;

В този пример, useFocusEffect куката слуша за събития на фокус, специфични за Блог пост компонент. Вътре в обратното извикване можете да извличате допълнителни данни, да извършвате действия или да актуализирате екрана въз основа на фокусираната публикация в блога.

Навигиране с динамични маршрути

За да навигирате до динамичен маршрут, можете да използвате методите за навигация, предоставени от Expo Router.

Например, за да навигирате до Блог пост компонент със специфичен postId, можете да използвате навигация.навигирам метод:

// приложение/компоненти/BlogList.js
импортиране Реагирайте от"реагира";
импортиране {useNavigation} от"експо-рутер";
конст BlogList = ({ blogPosts }) => {
конст навигация = useNavigation();


конст navigateToBlogPost = (postId) => {
 navigation.navigate("Блог пост", { postId });
 };


връщане (

 {blogPosts.map((пост) => (
 ключ={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
износпо подразбиране BlogList;

Когато натиснете публикация в блог, navigateToBlogPost функцията ще се задейства с postId.

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

Expo Router предоставя отлично решение за управление на навигацията във вашите React Native приложения. Чрез преосмисляне на естественото изживяване при маршрутизиране, Expo Router предлага гъвкавост и лекота на използване.

Проучихте функциите на Expo Router, задълбочихте се в основните концепции за маршрутизиране и открихте как да изграждате динамични маршрути. С Expo Router можете да създавате динамични навигационни потоци, да обработвате различни данни или потребителско въвеждане и да персонализирате навигацията във вашето приложение.