Прежде чем мы перейдем к разделу КАК этого блога, где мы будем добавлять Deep Linking в наше приложение React Native, давайте сначала рассмотрим ЧТО и ПОЧЕМУ, чтобы лучше понять концепцию.

Глубинная ссылка - это просто система фильтрации намерений, которая позволяет пользователю получить доступ к определенному действию в приложении Android с помощью URL-адреса. Предположим, что мы увидели определенный продукт (например, обувь) на веб-сайте электронной коммерции и хотим поделиться им с другом. Глубинная ссылка позволит нам поделиться URL-адресом, который позволит получателю открыть именно эту страницу обувного продукта в приложении всего за один щелчок, перенаправив их прямо на этот экран. Давайте посмотрим на определение, чтобы было понятнее:

Глубокая ссылка заключается в использовании унифицированного идентификатора ресурса (URI), который ссылается на определенное место в мобильном приложении, а не в простом запуске приложения. Отложенные ссылки на контент позволяют пользователям размещать ссылки на контент, даже если приложение еще не установлено.

Мы уже рассмотрели один пример в части What выше, но может быть гораздо больше случаев использования, когда глубокая ссылка может оказаться очень полезной. Подумайте о маркетинговых стратегиях, реферальных ссылках, обмене определенным продуктом и т. Д.

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

Давайте посмотрим, как создать его в React Native. Есть всего 3 простых шага.

Включенные шаги:

  1. Создать проект
  2. Отредактируйте AndroidManifest.xml
  3. Построить проект

Шаг 1. Создайте проект

Создайте проект React Native, выполнив эту команду:

react-native init deeplinkdemo

Шаг 2. Отредактируйте AndroidManifest.xml

Мы должны добавить intent-filter внутрь AndroidManifest.xml, чтобы указать входящие ссылки для запуска этого конкретного приложения.

<activity
 android:name=".MainActivity"
 android:label="@string/app_name"
 android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
 android:windowSoftInputMode="adjustResize">
 <intent-filter>
 <action android:name="android.intent.action.MAIN" />
 <category android:name="android.intent.category.LAUNCHER" />
 </intent-filter>
 <!--Copy & Paste code from here-->
 <intent-filter android:label="@string/app_name">
 <action android:name="android.intent.action.VIEW" />
 <category android:name="android.intent.category.DEFAULT" />
 <category android:name="android.intent.category.BROWSABLE" />
 <data android:scheme="app"
 android:host="deeplink" />
 </intent-filter>
 <!--To here-->
 </activity>

Надеюсь, в комментариях четко указано, что делать. Давайте разберемся с intent-filter немного лучше.

intent filter - это выражение в файле манифеста приложения, которое указывает тип намерений, которые компонент хотел бы получить.

Ознакомьтесь с тегом <data> внутри <intent-filter>. Есть два свойства, о которых мы должны позаботиться. Считайте scheme типом входящей ссылки и host как URL-адресом.

Наша глубокая ссылка будет выглядеть примерно так: app://deeplink

Прочтите Документы Google для получения дополнительной информации: developer.android.com/training/app-links/deep-linking

Шаг 3. Создайте проект

Перейдите в корневой каталог и выполните эту команду:

react-native run-android

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

Убедитесь, что ваше приложение работает в фоновом режиме, и выполните эту команду:

adb shell am start -W -a android.intent.action.VIEW -d app://deeplink com.deeplinkdemo

Если у вашего пакета другое имя, отредактируйте команду следующим образом:

$ adb shell am start -W -a android.intent.action.VIEW -d <URI> <PACKAGE>

Примечание. Присмотритесь к app://deeplink. Это наша ссылка, добавленная внутри intent-filter, чтобы указать наше приложение.

Если ваше приложение открылось успешно, значит, наши внутренние ссылки работают должным образом. Ура!

Ранее мы использовали схему app и то, как мы собираемся использовать схему https. Отредактируйте тег <data> внутри атрибута intent-filter следующим образом:

<data android:scheme="https" android:host="www.deeplinkdemo.com" />

Выполните эту команду:

adb shell am start -W -a android.intent.action.VIEW -d https://www.deeplinkdemo.com com.deeplinkdemo

Приветствую, если ваше приложение появится прямо перед вами.

Примечание:

Вы можете использовать несколько тегов <data> внутри intent-filter, так что что-то вроде этого совершенно нормально.

<data android:scheme="app" android:host="deeplink" />
<data android:scheme="https" android:host="www.deeplinkdemo.com" />

Оба идентификатора URI app: // deeplink и deeplinkdemo.com относятся к этому действию.

Вы также можете создать HTML-файл с этими двумя ссылками, такими как эта и test:

<html>
<a href="app://deeplink">DeepLink with app scheme</a>
<a href="https://www.deeplinkdemo.com">DeepLink with https scheme</a>
</html>

Получите доступ к файлу через localhost или поместите его на устройство. Щелкните ссылку, и мы надеемся, что это запустит ваше приложение.

Это была первая часть серии React Native Deep Linking Simplified, и во второй части мы узнаем, Как обрабатывать входящие ссылки при запуске приложения и перенаправлять пользователя.

Поделитесь этой статьей, если сочтете ее полезной.
Шад