Прежде чем мы перейдем к разделу КАК этого блога, где мы будем добавлять Deep Linking в наше приложение React Native, давайте сначала рассмотрим ЧТО и ПОЧЕМУ, чтобы лучше понять концепцию.
Глубинная ссылка - это просто система фильтрации намерений, которая позволяет пользователю получить доступ к определенному действию в приложении Android с помощью URL-адреса. Предположим, что мы увидели определенный продукт (например, обувь) на веб-сайте электронной коммерции и хотим поделиться им с другом. Глубинная ссылка позволит нам поделиться URL-адресом, который позволит получателю открыть именно эту страницу обувного продукта в приложении всего за один щелчок, перенаправив их прямо на этот экран. Давайте посмотрим на определение, чтобы было понятнее:
Глубокая ссылка заключается в использовании унифицированного идентификатора ресурса (URI), который ссылается на определенное место в мобильном приложении, а не в простом запуске приложения. Отложенные ссылки на контент позволяют пользователям размещать ссылки на контент, даже если приложение еще не установлено.
Мы уже рассмотрели один пример в части What выше, но может быть гораздо больше случаев использования, когда глубокая ссылка может оказаться очень полезной. Подумайте о маркетинговых стратегиях, реферальных ссылках, обмене определенным продуктом и т. Д.
Самым большим преимуществом мобильных глубинных ссылок является возможность маркетологов и разработчиков приложений направлять пользователей непосредственно в определенное место в своем приложении с помощью выделенной ссылки. Ссылки на контент делают Интернет более удобным, а мобильные ссылки на контент делают то же самое с мобильными приложениями.
Давайте посмотрим, как создать его в React Native. Есть всего 3 простых шага.
Включенные шаги:
- Создать проект
- Отредактируйте AndroidManifest.xml
- Построить проект
Шаг 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, и во второй части мы узнаем, Как обрабатывать входящие ссылки при запуске приложения и перенаправлять пользователя.
Поделитесь этой статьей, если сочтете ее полезной.
Шад