React
React native - 앱 스킴 만들기
윤-찬미
2022. 4. 18. 00:37
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
// 생략
}