React Native-bleepy developers

화면 전환하기

블리피 런처는 게임에서 클라이언트가 원하는 화면으로 전환을 위해 [ClientAdmin] 에서 Deep Link 형식으로 설정된 이동 링크를 호출합니다. 사전에 클라이언트 앱 내에 scheme, host 관련된 처리를 추가해야 블리피 런처가 Deep Link 호출 시 화면 전환 및 필요한 값을 전달할 수 있습니다.

Deep Link

화면 이동 링크 URL은 기본적인 Deep Link 형태로 작성 되어 클라이언트 앱을 호출하게 됩니다.

json

scheme://host?parameter1=value1&parameter2=value2…

Key	Required	Description
scheme	required	URI를 지정하기 위한 최소한의 필수 속성입니다. ex) bleepy
host	required	URI 권한의 호스트 부분입니다.
parameter	optional	Query string key 값입니다.
value	optional	Query string value 값입니다.

블리피 런처에서 전달하는 Deep Link 값을 React Native에서 사용하기 위해 다음 처리가 필요합니다.

React Navigation에서 제공하는 [가이드 문서(Deep linking)]를 참고하시면 도움이 됩니다.

1. React Native에서 Deep linking을 위한 설정 추가

AOS/IOS 두 플랫폼에서 사용하기 위해 아래와 같이 처리가 필요합니다.

Android

프로젝트 루트 경로 내 android/app/src/main/AndroidManifest.xml 파일 내 Deep Linking 처리를 위한 intent-filter 를 추가합니다.
scheme 값은 화면 전환 시 클라이언트가 사용할 Deep Link에 설정한 스키마 값으로 사용합니다.

xml

// android/app/src/main/AndroidManifest.xml <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <uses-permission android:name="android.permission.INTERNET" /> <application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme"> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter>  <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> </application> </manifest>

IOS

scheme 관련 정보를 직접 코드 추가 또는 Xcode 내 설정하는 방법 중 하나로 추가합니다.

info.plist 직접 코드를 추가합니다.
- CFBundleURLTypes 관련 내용을 아래와 같이 추가합니다.

xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"> <plist version="1.0"> <dict> ... <key>CFBundleURLTypes</key> <array> <dict> <key>CFBundleTypeRole</key> <string>Editor</string> <key>CFBundleURLName</key> <string>{식별자(scheme와 동일하게 세팅해도 무관)}</string> <key>CFBundleURLSchemes</key> <array> <string>{사용할 scheme}</string> </array> </dict> </array> ... </dict> </plist>

Xcode내에서 설정하는 방법입니다.
- URL Types에 scheme 추가합니다.

프로젝트 내 ios/ 경로 내에 몇가지 설정을 더 추가합니다.

objectivec

// ios/프로젝트명/AppDelegate.mm // 파일 상단에 추가 #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]; } ... @end

2. NavigationContainer linking 추가

React Native에서 제공하는 NavigationContainer 의 linking 기능을 사용하여 Deep Link 호출을 컨트롤합니다.

typescript

// App.tsx export default function App() { // 사용할 scheme, host를 통해 이동할 screen을 지정 const linking = { prefixes: ['{scheme}://'], screens: { {host}: '스크린명', }, }; return ( // linking set <NavigationContainer linking={linking}> <Stack.Navigator screenOptions={{headerShown: false}}> ... </Stack.Navigator> </NavigationContainer> ); }

개발에 대한 추가 설명이 더 필요하신가요?

"[Client Admin] 로그인 → 오른쪽 하단 채널톡 위젯" 클릭 후 개발 카테고리에 문의 남겨주시면 기술 개발팀에서 확인 후 연락드리겠습니다.

v1.0.6