ReactNative - Deep linking, 내 앱을 열어줘

https://reactnative.dev/docs/0.63/linking

위의 Docs를 기반으로 작성하였습니다.

 

알림톡, 링크 등을 이용해 앱을 열고자 할때

필요한 기능이 바로

Deep linking입니다.

 

마케팅이나 사용자 편의성 측면에서

굉장히 유용한 기능입니다.

설정도 간편하니 알아보도록 하겠습니다.

 

1. IOS 설정

// IOS 설정, Application.m


// top
#import <React/RCTLinkingManager.h>


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

 

그리고 xcod > targets > app > info > url types

+를 눌러

Identifier, URL Schemes를 고유명칭으로 잡아줍니다.

예를들어, hssteve

 

2. Android 설정

// AndroidMenifest.xml

<intent-filter>
  <action android:name="android.intent.action.MAIN" />
  <category android:name="android.intent.category.LAUNCHER" />
  <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>
</intent-filter>
<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="hssteve" />
</intent-filter>

 

3. App.jsx (App.tsx) 설정

Linking.addEventListener('url', schemeListener)

const schemeListener = ({ url }) => {
  console.log('from: ', url);
}

 

테스트를 해볼까요?

// android 테스트
npx uri-scheme open hssteve://some/thing --android

// ios 테스트
npx uri-scheme open hssteve://some/thing --ios

 

console이 잘 찍히나요?

페이지 이동을 위해 쓴다면

수신하는 url 맞게

redirect해주면 될것같습니다.

 

어떻게 쓸지는 자유!

유용한 기능 입니다.