런처와 React Native간의 통신을 수행하기 위해 WebView 의 onMessage 콜백을 정의합니다.
WebView 에 로드된 런처에서 React Native로 메세지 이벤트를 전달합니다.
다음은 런처에서 전달하는 이벤트 케이스 입니다.
Type
Description
closeLauncher
런처의 Back 버튼 UI 클릭 시 (뒤로가기 처리)
launcherLoaded
런처 로드가 완료된 시점에 호출
timerMissionComplete
타이머 미션이 완료 되었을 때 호출
giftReceived
육성완료 시 호출
// src/screens/launcher/Launcher.tsx
import {WebView, WebViewMessageEvent} from 'react-native-webview';
export default function Launcher() {
// WebView에서 보내온 메세지 처리
const onMessage = (e: WebViewMessageEvent) => {
const {type, inviteCode, infoMessage, link}
= JSON.parse(e.nativeEvent.data);
switch (type) {
case 'closeLauncher':
closeLauncher();
break;
case 'launcherLoaded':
launcherLoaded();
break;
case 'timerMissionComplete':
timerMissionComplete();
break;
case 'giftReceived':
giftReceived();
break;
}
};
return (
<View>
<WebView
...
onMessage={onMessage}
...
/>
</View>
);
}
// src/screens/launcher/Launcher.tsx
// 런처 종료 - 블리피 런처의 Back 버튼 UI 클릭 시 React Native에서는 뒤로가기 처리를 수행합니다.
const closeLauncher = () => {
if (navigation.canGoBack()) {
navigation.goBack();
}
};
// 런처 로드 완료
const launcherLoaded = () => {
// 런처의 로드가 완료된 후 추가적인 처리 필요 시 사용
};
// 타이머 미션 완료
const timerMissionComplete = () => {
// 타이머 미션 완료 후 추가적인 처리 필요 시 사용
};
// 육성완료
const giftReceived = () => {
// 육성완료 후 추가적인 처리 필요 시 사용
};
4단계: 런처 스크린 세로모드 고정
게임은 세로모드 해상도에 최적화 되어 스크린의 세로모드 고정이 필요합니다.
세로모드 고정을 위해 react-native-orientation-locker 라이브러리를 설치합니다.
// 추가
import Orientation from 'react-native-orientation-locker';
export default function Launcher() {
...
// 추가
useEffect(() => {
// 화면 방향을 세로로 고정합니다.
Orientation.lockToPortrait();
return () => {
// clean-up에서 다른 스크린에 영향 없도록 Orientations 해제
Orientation.unlockAllOrientations();
};
}, []);
return (
<View>
<WebView ... />
</View>
);
}
iOS 환경에서는 추가 설정이 필요합니다.
/ios/AppDelegate.m 파일을 열고 아래 코드를 추가합니다.
pod install 실행합니다.
// AppDelegate.m or AppDelegate.mm
// 추가
#import "Orientation.h"
@implementation AppDelegate
...
// 추가
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(UIWindow *)window {
return [Orientation getOrientation];
}
...
@end
5단계: 화면 전환 설정
1. 딥링킹을 위한 설정 추가
React Native 환경 내 Android / iOS 두 플랫폼에서 딥링킹 처리를 위한 가이드입니다.
Android
프로젝트 루트 경로 내 android/app/src/main/AndroidManifest.xml 파일 내 딥링킹 처리를 위한 intent-filter 를 추가합니다.
