[React Native] 딥링크 설정하기

React Navigation 공식문서에서 해당 내용을 확인하실 수 있습니다

https://reactnavigation.org/docs/deep-linking/

 

안드로이드

android > app > src > main > AndroidManifest.xml

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="설정할 앱 스킴"/>
 </intent-filter>

 

 

IOS

ios는 2가지를 설정해줘야 합니다

 

1. ios > 프로젝트 이름 폴더 > AppDelegate.mm

해당 코드를 넣어줍니다

#import <React/RCTLinkingManager.h>


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

 

 

2. xcode > 프로젝트 > info탭 > 가장 아래 URL Types

원하는 URL Schemes를 설정해줍니다

 

 

 

 

cli를 통해 설정한 url스킴이 제대로 동작하는지 확인합니다

android: $ npx uri-scheme open 설정한URL스킴:// --android
ios: $ npx uri-scheme open 설정한URL스킴:// --ios

 

 

 

설정한 딥링크를 통해 특정 화면으로 네비게이션 시키기

liking 객체를 만들어서 NavagationContainer에 넣어주면 됩니다

1. 설정한 스킴은 prefixes에 넣어주세요.

2. 스크린에 연결해줄 path를 입력합니다.

  const linking = {
    prefixes: ['daepyo://'],
    screens: {
      redirect: {
        path: '/redirect',
      },
    },
  };

 

 

저 같은 경우는daepyo://redirect?code=~ 딥링크를 받으면

redirect 페이지에서 code에 해당하는 파라미터 값을 받을 예정입니다

 

useRoute를 사용해서 code 파라미터를 받아서 넘겨줍니다