React Native: глубокая привязка IOS-Android

В этом руководстве мы настроим наше приложение для обработки внешних URI. Предположим, мы хотим, чтобы URI типа myapp://character/cool_rick открывал наше приложение и ссылался прямо на экран персонажа с именем «cool_rick».

Начнем с создания нового проекта.

react-native init deep_linking

Теперь нам нужно установить react-navigation react-navigation-stack,react-native-gesture-handlerв наш проектс помощью npm или yarn.

yarn add react-navigation
yarn add react-navigation-stack
yarn add react-native-gesture-handler
or with npm
npm install react-navigation 
npm install react-navigation-stack
npm install react-native-gesture-handler

React Native 0.60 и выше
В более новых версиях React Native связывание выполняется автоматически.
Чтобы выполнить связывание на iOS, убедитесь, что у вас установлен Cocoapods. Затем запустите:

cd ios 
pod install 
cd ..

Теперь мы запускаем наше приложение

IOS

react-native run-ios

Андроид

react-native run-android

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

deep_linking
├── app
│   ├── character
│   │   └── index.js
│   ├── index.js
│   ├── router
│   │    └── index.js
│   └─- index.js
│...

в app/router/index.js мы создаем навигацию следующим образом:

В app/index.js создаем представление, в котором будем видеть символы, которые получим из characters.json

Если все хорошо, у нас должно получиться что-то подобное.

Теперь мы переходим к app/character/index.js и создаем представление, в котором мы собираемся показывать каждый символ.

При этом наше приложение должно работать следующим образом

Что мы делали до сих пор.
мы создали новый проект.
мы устанавливаем некоторые пакеты, такие как react-navigation, для настройки нашего маршрутизатора.
мы создали 2 представления, в которых показывали список персонажей и детали каждого персонажа.

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

Настройка iOS

In deep_linking/ios/deep_linking/AppDelegate.m:

// Add the header at the top of the file: 
#import <React/RCTLinkingManager.h>
// Add this above the `@end`: 
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url
options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
   return [RCTLinkingManager application:app openURL:url    options:options];
}

В deep_linking/ios/deep_linking/Info.plist. мы вставляем следующий код

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>deeplinking</string>
      </array>
    </dict>
  </array>

С этим мы можем протестировать наше приложение, открыв нашу ссылку

react-native  start --reset-cache
react-native run-ios

мы тестируем URI на симуляторе, выполняя следующее:

xcrun simctl openurl booted deeplinking://character/?id=1

Настройка Android

В deep_linking/android/app/src/main/AndroidManifest.xml мы добавляем фильтр намерений под последним фильтром намерений внутри тега ‹activity›:

<intent-filter android:label="filter_react_native">
   <action android:name="android.intent.action.VIEW" />
   <category android:name="android.intent.category.DEFAULT" />
   <category android:name="android.intent.category.BROWSABLE" />
   <data android:scheme="deeplinking" />
</intent-filter>

мы тестируем URI на симуляторе, выполняя следующее:

adb shell am start -W -a android.intent.action.VIEW -d "deeplinking://character/?id=1" com.deep_linking

Окончательный код для этого примера можно найти здесь.