[React Native] deep link 설정 및 핸들링

설정 방법 (url 스키마는 "testmyapp"이라는 이름을 예시로 하겠음)

ios

1. AppDelegate.m에 다음 내용을 추가

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

...

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

2. 프로젝트 - targets - 타겟 프로젝트 - info탭 - URL Types에 + 버튼을 누른 후 Identifier와 URL Schemes란에 허용할 이름 입력 & 빌드

 

android - AndroidManifest.xml 파일에 다음 내용을 추가 & 빌드 

<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="testmyapp" />
  </intent-filter>  
</activity>

 

reacxt-native - 다음 내용의 TestScreen.js 파일 추가

import React, {useEffect} from 'react';
import {Linking, Alert} from 'react-native';

const TestScreen = (props) => {

	useEffect(() => {
     	Linking.getInitialURL()			// 최초 실행 시에 Universal link 또는 URL scheme요청이 있었을 때 여기서 찾을 수 있음 
     		.then(value => {
       			Alert.alert('getInitialURL', value);
     	})
        
         Linking.addEventListener('url', (e) => {		// 앱이 실행되어있는 상태에서 요청이 왔을 때 처리하는 이벤트 등록
      		const route = e.url.replace(/.*?:\/\//g, '');
      		Alert.alert('add e.url', e.url);
    	});

    	return () => {	
      			Linking.removeEventListener('url', (e) => {		// 이벤트 해제
          		Alert.alert('remove e.url', e.url);
      		});
    	};
    })
}

 

에뮬레이터 상에서 테스트! 

android: $ npx uri-scheme open testmyapp://paremeter=239193 --android

ios: $ npx uri-scheme open testmyapp://paremeter=239193 --ios