Обработка ссылок и обмен вещами

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

Ссылки являются основой сети. Но даже несмотря на то, что React Native использует знакомый синтаксис JSX, к которому мы привыкли в React, есть несколько отличий. Сначала мы поменяли местами элемент <div> на <View>, а теперь обнаруживаем, что элемента <a> нет. В этом посте мы узнаем, как добавить ссылки на наше приложение в React Native. В качестве бонуса мы также коснемся того, как мы можем добавить действие «поделиться». Это довольно просто, и это будет короткий пост.

Обработка веб-ссылок в приложении

Самый простой случай — это обработка веб-ссылок (т. е. ссылок http:// или https://) в нашем приложении. Например, мы хотели бы включить ссылку на веб-сайт ресторана в представление сведений об этом ресторане. В React Native есть два способа сделать это.

Один из вариантов — использовать модуль Linking из React Native. Вот самый простой пример:

Когда пользователь нажимает на текст «Перейти на веб-сайт», операционная система открывает браузер по умолчанию на устройстве и пытается отобразить URL-адрес, как мы видим на снимке экрана ниже.

Хотя это рабочее решение, мы можем дать пользователю лучший опыт. Вместо того, чтобы выходить из приложения, мы можем сделать так, чтобы браузер отображался как модальное окно внутри приложения. Для этого нам понадобится модуль Expo WebBrowser, как показано ниже:

Если вы заметили, единственное изменение в функции handleOpenUrl. Когда мы нажимаем на ссылку, результат выглядит примерно так на iOS:

Обработка невеб-ссылок

Мы выяснили, как обрабатывать URL-адреса в Интернете, но как насчет других типов URL-адресов? Например, мы хотели бы добавить ссылку на номер телефона ресторана, которая должна активировать функцию «позвонить по телефону» операционной системы. К счастью, ранее модуль Linking мог обрабатывать некоторые основные схемы URL-адресов, такие как tel (открытое приложение для телефона), mailto (открытое почтовое приложение) и sms (открытое приложение для обмена текстовыми сообщениями). Вот как будет выглядеть наша ссылка «телефонный ресторан»:

Обратите внимание, что аргумент должен быть действительным tel URL. Если вы попытаетесь запустить это на симуляторе, вы заметите, что это не поддерживается (см. ниже).

Но если вы откроете это на своем устройстве, все будет работать как положено:

Обмен

Еще одна функция, которую мы хотим иметь в нашем приложении, — это возможность делиться контентом (например, списком или конкретным рестораном) с нашими контактами. На самом деле это очень легко сделать в React Native, и это работает из коробки, как мы видим здесь:

Вы можете посмотреть документацию для получения более подробной информации, но вот несколько вещей, на которые следует обратить внимание:

  • Модулю Share нужен некоторый код для конкретной платформы, для которого нам нужно использовать модуль Platform (чтобы определить, на каком устройстве мы работаем).
  • В iOS мы получаем информацию о том, где пользователь поделился контентом (например, com.apple.UIKit.activity.CopyToPasteboard). Мы также получаем обратную связь, если пользователь отклонил действие «поделиться».

Наконец, вот как выглядит действие «поделиться» на iOS и Android:

Глубокие ссылки

Одна большая тема, которую мы здесь не упомянули, — это то, что называется «глубокие ссылки». Здесь мы настраиваем наше приложение для обработки определенных ссылок непосредственно в нашем приложении. Например, когда вы нажимаете на URL-адрес Google Maps и у вас установлено приложение Google Maps, операционная система знает, что нужно открыть приложение, чтобы справиться с этим. В нашем примере мы могли бы сделать то же самое: например, ссылка на список может открыть приложение и перейти непосредственно к этому списку. Это более длинная тема, которую я раскрою отдельно в следующем посте блога. Быть в курсе!

Если вам понравилась эта статья, не стесняйтесь нажать кнопку хлопка 👏, чтобы помочь другим найти ее.

Обо мне

Я Алекс, инженер-программист и фанат стартапов. В настоящее время я являюсь соучредителем стартапа AgentRisk, где я являюсь вице-президентом по продукту и разработке. В прошлой жизни я был частью команды инженеров-основателей в стартапе корпоративных облачных хранилищ в Силиконовой долине, делал кучу крутых передовых проектов в Cisco Research и работал над действительно инновационной сетью центров обработки данных. архитектуры» во время учебы в магистратуре Калифорнийского университета в Сан-Франциско. Мне всегда нравится изучать новые технологии и постоянно заниматься поставками сторонних проектов.