ReactNative - [ios/android] Deep Link 딥링크

1. 서론

나의 앱에서 다른 특정 앱을 실행하고자 할 때 딥링크 설정이 필요하다.

2. Deep Link

딥링크란, 모바일 환경에서 특정 앱을 실행시키거나, 특정 앱의 특정 페이지로 이동시키는 주소 혹은 값이다.

2.1 딥링크 종류

- URI scheme: 앱에 URI scheme 등록
- 앱 링크(App Link): 도메인 주소를 등록 (Android only)
- 유니버셜 링크(Universal Link): 도메인 주소를 등록 (iOS only)

2.1.1 URI Scheme

2.1.2 앱링크 & 유니버셜 링크

3. 설정

3.1 안드로이드

<!-- ./android/app/src/main/AndroidManifest.xml -->

<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">
    <uses-permission android:name="android.permission.INTERNET" />
    <application
        ...
        >
        <activity
          ...
          >
        ...
            <intent-filter>
                <action android:name="android.intent.action.VIEW"/>
                <category android:name="android.intent.category.DEFAULT"/>
                <category android:name="android.intent.category.BROWSABLE"/>
                <data
                    android:scheme="testapp" />
            </intent-filter>
		...
      	</activity>
    </application>
</manifest>

> react-native run-android

3.2 ios

./ios/{your-project-name}/Info.plist

	...
	<key>CFBundleURLTypes</key>
        <array>
            <dict>
                <key>CFBundleTypeRole</key>
                <string>Editor</string>
                <key>CFBundleURLName</key>
                <string>{}</string>
                <key>CFBundleURLSchemes</key>
                <array>
                    <string>testapp</string>
                </array>
            </dict>
        </array>
   	<key>LSApplicationQueriesSchemes</key>
 	<array>
     	<string>testapp</string>
	</array>
	...

AppDelegate.mm

// 파일 상단에 추가
#import <React/RCTLinkingManager.h>
...

// `@end`위에 추가
- (BOOL)application:(UIApplication *)application
   openURL:(NSURL *)url
   options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
{
  return [RCTLinkingManager application:application openURL:url options:options];
}

1) xocde로 프로젝트 열기
2) 프로젝트 폴더 -> targets -> 타겟 프로젝트 -> info탭 -> URL Types에 + 버튼을 누른 후 Identifier와 URL Schemes에 testapp 입력
3) testapp://... 사용 가능

> cd ios && pod install

> react-native run-ios

4. 실행

android

> npx uri-scheme open testapp://home

ios

> npx uri-scheme open testapp://home

---

참고

https://reactnavigation.org/docs/deep-linking/#set-up-with-bare-react-native-projects