Всем привет!
Случайно снес результаты голосования 🌟

Большее количество голосов было за Deep Linking, так что разбор в процессе, постараюсь до конца недели выкатить с примерами и кодом на GH

А нет, не снес, пруфы есть 💻

🖱️ Deep Linking в приложениях на React Native. Part 1

Будет два поста, один про работу с Deep Linking в рамках Expo (изи левел) и второй пост в настройкой в чистом проекте (нот изи левел)

Deep Linking — это инструмент, который позволяет юзеру переходить к определённому контенту внутри приложения напрямую, минуя остальные экраны. Мы каждый день встречаемся с этим механизмом в приложениях.

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

Deep Linking в Expo

1. Тут по классике, сначала

npx create-expo-app@latest

если у вас уже есть проект, то идем к слудующему шагу

2. Открываем файл конфигурации app.json и добавляем в него

   "scheme": "react-pain"

вместо "react-pain" можете указать все что угодно, но логичнее наверное название приложения или типа того, дальше будет видно где это используется.

А так как у нас проект на экспо использует expo-router, по сути нам кроме этого для старта больше ничего не нужно.

Но, если вы используете на текущем проекте React Navigation, то смотрим сюда, что еще необходимо сделать

Запускаем!

В нашем пустом проекте есть 2 страницы index и explore.

Для проверки работы нам достаточно будет использовать утилиту командной строки — uri-scheme

Переходим в консоль и вбиваем

npx uri-scheme open [your deep link] --[ios|android]

#для iOS при использовании клиента Expo
npx uri-scheme open "exp://127.0.0.1:19000/--/explore" --ios

#для собранного приложения на iOS
npx uri-scheme open "react-pain://explore" --ios

После выполнения команды, мы попадем на второй экран приложения!

Идем дальше. Добавляю для примера на страницу Explore список их 10 записей + отдельную страницу для отображения детальной информации (смотрите доку по expo-router). Возвращаемся в консоль:

npx uri-scheme open "react-pain://explore/7" --ios

После вызова команды, мы попадем в приложение на детальную страницу с ID 7. Profit!

Можете сами проверить и поковырять проект, выложил его на GitHub

Следующий пост будет про чистый проект + тестирование ссылок с использованием xcrun для iOS и adb для Android

Всем хорошего завершения рабочей недели 💃


⚡️ReactNative и что-то остальное