React native - 앱 스킴 만들기

ios

ios 만 다룹니다!

 

AppDelegate 설정

ios / [프로젝트 이름] / AppDelegate.m

⭐️맨상단⭐️ 에 아래 코드를 추가한다.

#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];
}

universal link를 사용하는 경우 아래 코드도 추가 합니다.

단, 유니버설 링크가 앱에서 작동하도록 하려면 서버에 연결된 도메인 도 설정해야 합니다.

- (BOOL)application:(UIApplication *)application continueUserActivity:(nonnull NSUserActivity *)userActivity
 restorationHandler:(nonnull void (^)(NSArray<id<UIUserActivityRestoring>> * _Nullable))restorationHandler
{
 return [RCTLinkingManager application:application
                  continueUserActivity:userActivity
                    restorationHandler:restorationHandler];
}

 

XCODE 설정

프로젝트 선택 > TARGETS 에 프로젝트 선택 > INFO 탭 선택 > 아래 URL Types 열기 > Identifier 와 URL Schemes 을 설정

pod install 하고 재빌드 해주면 된다.

npx pod-install

쉽게 하는 방법은 아래 명령어를 입력해도 위와 같이 동작 한다.

npx uri-scheme add [원하는 이름] --ios

 

react navigation app linking

https://reactnavigation.org/docs/typescript/

라이브러리를 활용하면 딥링크에 대한 처리들을 간편하게 할 수 있다.

기본 세팅은 문서를 참고!

아래와 같은 앱이 있다고 하면, NavigationContainer에 linking에 연결 하면 된다.

const App = () => {
  const linking = {
    prefixes: ['test://login'],
  };
	return (
    <NavigationContainer linking={linking}>
      <Stack.Navigator
        screenOptions={{
          headerShown: false
        }}
      >
        <Stack.Screen name="Login" component={Login} />
	    </Stack.Navigator>
    </NavigationContainer>
  )
}

 

앱 스킴으로 열리는지 확인 하기

아래 명령어를 활용하면 앱이 열리는 것을 확인할 수 있다.

npx uri-scheme open "[나의 앱 스킴]" --ios

 

쿼리 파라미터 받는 방법

예를 들어 test://login?code=”123” 이 날라왔다고 해보자, 이때 code에 대한 데이터를 어떻게 받을 수 있나? 우선 react navigation을 쓰고 있음으로, 문서를 참고 하면된다

const linking = {
  prefixes: ['test://login'],
  config: {
    screens: {
      login: {
        path: '/:code',
      },
    },
  }
};

받는 쪽에선 아래와 같이 확인 할 수 있다.

function Login({route}: IntroScreenProps) {
  console.log(route.params.code); // 123
  // 생략
}