[React-Native] IOS, Android 딥링크 환경세팅 및 구현하기

DaYoung·2024년 2월 16일

React-Native

목록 보기

19/35

딥링크 구현

IOS 환경세팅

1.AppDelegate.mm 코드 추가

ios > 프로젝트 > AppDelegate.mm
AppDelegate.m 파일 제일 상단에 다음을 추가해준다.
주의할 점은 상단쪽이 아닌 다른 곳에 추가하면 빌드 에러가 생길 수 있으므로
반드시 상단에 추가해야한다.

#import <React/RCTBundleURLProvider.h>  //추가

2.URL Type 추가

Xcode > 프로젝트 > targets(프로젝트) > info탭 > URL Types

${URL_SCHEME}는 Build Settings > User-Defined > URL_SCHEME에서 등록해주면 된다

Identifier, URL Schemes를 설정해주면 test://식으로 프로토콜로 사용하게 된다.

3. cd && pod install -> 재빌드

Android 환경세팅

1.AndroidManifest.xml 코드 추가

android > app > src > main > AndroidManifest.xml
AndroidManifest.xml파일 activity 블록 안에 다음을 추가해준다.

<activity 
  ... >
  //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="${scheme}" />
      </intent-filter>
</activity>

이 부분에서 스키마 값 이름이 딥링크의 프로토콜 이름이라고 보면 된다.

${scheme}부분은
android > app > build.gradle에 아래와 같이 설정해주었다.

    productFlavors {
        dev {
            minSdkVersion rootProject.ext.minSdkVersion
            applicationId 'com.aimme.test.dev'
            targetSdkVersion rootProject.ext.targetSdkVersion
            resValue "string", "build_config_package", "com.aimme.test"
            manifestPlaceholders.scheme = "test-dev"   //여기
        }

2.재빌드

IOS, Android 공동 세팅

환경세팅은 완료되었고,
앱이 켜지면 바로 딥링크를 통해 지정한 스크린으로 이동할 수 있도록 로직을 추가해주어야 한다.
해당 앱이 설치되어 있다는 전제하에 test://home과 같은 딥링크를 누르게 되면 곧바로 해당 페이지로 이동하는 것이 목적이다.

App.tsx

 const App = () => {
 
 	 const linking = {
    //defalut 프로토콜 설정이 필요함
    prefixes: ['https://...', 'test://', 'test-dev://'],

    getInitialURL: async () => {
      const url = await Linking.getInitialURL();
      if (url != null) {
        return url;
      }
      return null;
    },

 	//addEventListener로 받은 딥링크 url을 subscribe에 넣어주어야 한다.
    subscribe: (listener: (url: string) => void) => {
      const onReceiveURL = ({url}: {url: string}) => {
        return listener(url);
      };

      const subscription = Linking.addEventListener('url', onReceiveURL);

      return () => {
        subscription.remove();
      };
    },

      config,  //설정필요
 	}
    
    return (
      <GestureHandlerRootView style={{flex: 1}}>
         <NavigationContainer
           onReady={onReady}
           linking={linking}  //linking을 NavigationContainer에 props 해줘야한다.
           ref={navigationRef}
         >
            <Root />
            <UpdateModal isVisible={openUpdate} />
         </NavigationContainer>
         <GlobalLoading />
         <Toast config={toastConfig} />
      </GestureHandlerRootView>
    )
};

  const config = {
    screens: {
      BottomTab: {
        screens: {
          Coaching: '/Coaching/:tabId/:scroll?',
          Home: '/home', // 홈
          Notice: '/Notice', // 공지시항
          MyInfo: '/myInfo', // 내정보
        },
      },
      NoTab: {
        screens: {
          ActivityManagement: '/activityManagement/:tabId', // 걸음수관리 (tabId: 'week' | 'month'), 6
          Event: '/event/:evtGrpNo/:seq?', // 이벤트 리스트(seq가 있으면 상세페이지)
          Notice: '/notice/:ntcNo?', // 공지사항 리스트(ntcNo가 있으면 상세페이지)
          HealthPick: {
            path: '/healthPick/:gdNo?', // 건강Pick 리스트(gdNo가 있으면 상세페이지),
            parse: {
              gdNo: (gdNo: string) => Number(gdNo),
            },
          },
          ChatBot: '/chatBot/:path/:url?', // 챗봇(원하는 URL을 주입)
        },
      },
    },
  };

config는 프로젝트 전체의 stack navigation의 스크린 디렉토리에 정확하게 삽입해야한다. 디렉토리 정보를 통해 딥링크가 들어오면 바로 원하는 스크린으로 이동할 수 있다.
key는 실제 stack navigation의 이동을 위해 설정한 이름
value는 addEventListener로 받은 딥링크 url을 구분하기 위한 값으로, test://home의 home 부분이라고 생각하면 된다.