Deeplink в React Native: Полное руководство

Салют, народ! 👋

В своей работе я часто сталкиваюсь с тем, что новички испытывают трудности в понимании концепции deeplink и его правильной настройки. Чтобы помочь решить эту проблему, я подготовил краткое руководство, которое объяснит, что такое deeplink и как его правильно настроить в React Native.

Deeplink — специальная ссылка, которая может открыть ваше приложение и перенаправить пользователя непосредственно на определённый экран или действие. Например, ссылка myapp://profile/123 может открыть профиль пользователя с ID 123.

Настройка Deeplinks

Настройка для Android

1. Откройте файл AndroidManifest.xml.
2. Добавьте <intent-filter> в активность приложения для поддержки deeplinks.

Пример:

Для поддержки App Links добавьте домен:

Настройка для iOS

1. Откройте файл Info.plist вашего проекта.
2. Добавьте секцию CFBundleURLTypes для определения вашей схемы URL.

Пример:

			CFBundleURLTypes

  
    CFBundleURLSchemes
    
      myapp 
    
  

		

Здесь myapp:// станет вашей базовой схемой для deeplinks.

Для поддержки универсальных ссылок (Universal Links) добавьте домен вашего сайта:

			Associated Domains

  applinks:yourdomain.com

		

Обработка Deeplinks в React Native

Есть два способа обработки событий deeplinks в проекте. React Native предоставляет встроенный модуль Linking , а также есть возможность использовать функционал библиотеки react-navigation

Использование Linking API

Пример использования Linking для обработки deeplinks:

			import { Linking } from 'react-native';

// Получение начального URL при запуске приложения
Linking.getInitialURL().then(url => {
  if (url) {
    console.log('Приложение открыто через:', url);
    handleDeepLink(url);
  }
});

// Обработка входящих ссылок во время работы приложения
Linking.addEventListener('url', event => {
  const url = event.url;
  console.log('Получена ссылка:', url);
  handleDeepLink(url);
});

// Функция для обработки deeplinks
function handleDeepLink(url) {
  // Разбор URL и навигация к нужному экрану
  const route = parseUrl(url); // Реализуйте свой парсер
  navigateToScreen(route);
}
		

Использование React Navigation

Если вы используете react-navigation, можно настроить глубокую интеграцию с помощью NavigationContainer.

Пример конфигурации:

			const linking = {
  prefixes: ['myapp://'],
  config: {
    screens: {
      Home: 'home',
      Profile: 'profile',
    },
  },
};

<NavigationContainer linking={linking}>
  {/* Навигаторы */}
</NavigationContainer>
		

Теперь ссылка myapp://profile автоматически откроет экран Profile.

Тестирование Deeplinks

Тестирование на Android

• Используйте ADB команду: 

			adb shell am start -W -a android.intent.action.VIEW -d "myapp://path" com.yourpackage
		

• Для стандартных ссылок откройте https://yourdomain.com/path в браузере.

Тестирование на iOS

• Используйте Safari для открытия ссылок типа myapp://.
• Для Universal Links откройте https://yourdomain.com/path в браузере.

Лучшие практики

1. Используйте уникальные схемы: Избегайте конфликтов с другими приложениями.
2. Добавьте fallback: Если ссылка не может быть обработана, перенаправьте пользователя на главный экран.
3. Защитите данные: Не передавайте конфендециальную информацию через URL.

Внедрение и тестирование deeplinks в React Native — важный шаг к созданию более удобного и интерактивного пользовательского опыта. Следуя этому руководству, вы сможете успешно настроить инструмент, обеспечив быструю и удобную навигацию внутри приложения.