한국어
Wepin Blog Contact

설치

요구사항

  • React Native version 0.71.8 이상

설치하기

Wepin React Native SDK 를 설치하는 방법을 설명합니다.

Wepin 설치하기

Wepin React Native SDK는 npm 패키지로 설치 가능합니다. 

npm install @wepin/react-native-sdk

peerDependencies

npm install react-native-device-info
npm install react-native-inappbrowser-reborn
npm install react-native-webview
npm install react-native-encrypted-storage
npm install react-native-permissions
npm install @react-native-clipboard/clipboard

# for ios
cd ios
pod install

or

yarn add react-native-device-info
yarn add react-native-inappbrowser-reborn
yarn add react-native-webview
yarn add react-native-encrypted-storage
yarn add react-native-permissions
yarn add @react-native-clipboard/clipboard

# for ios
cd ios 
pod install

추가 설치 (version '0.0.7-alpha' and above)

프로바이더 기능을 React Native 환경에서 사용하기 위해서, 아래와 같이 추가 package를 install 하고 초기화 해야 합니다.

npm install --save-dev rn-nodeify

or

yarn add --dev rn-nodeify

추가로 아래와 같이package.json 파일의 postinstall 스크립트에 rn-nodeify 커맨드를 추가해야 합니다. 

{
  "scripts": {
        ...,
  	"postinstall": "rn-nodeify --install fs,crypto,https,http,stream,path,zlib,assert --hack",
  	...
  }
 }

postinstall 스크립트를 실행한 이후에, 생성된 shim.js 파일을 어플리케이션의 루트 파일에 import 해야 합니다. 

import './shim'

iOS 인 경우

AppDelegate.mm 수정하기

아래와 같이 AppDelegate.mm 에 추가해야 합니다. 

#import <React/RCTLinkingManager.h>

...

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

Info 수정하기

Xcode에서 앱의 Info에 URL Schemes를 등록해야 합니다.

Project에서 Info 탭을 선택합니다. URL Types 에 + 을 클릭해서 Identifier와 URL Schemes 를 추가 합니다. Identifier는 앱의 Bundle ID 입니다. URL Schemes의 값은 wepin. + wepin app id 로 해야 합니다.

변경 사항 안내: 딥링크 스킴값 변경 (SDK Version 0.0.20-alpha이상부터)

SDK 버전 0.0.20 이상을 사용할 경우, 딥링크 스킴 값의 구조가 업데이트 되었음을 알려드립니다.

  • 변경 전: bundle id + '.wepin'

  • 변경 후: 'wepin.' + wepin app id

Wepin 위젯 기능 사용을 위해 올바른 딥링크 스킴값 사용이 필수적입니다. Wepin 위젯의 정확한 동작을 위해 새로운 스킴 값을 적용해주시기 바랍니다.

퍼미션 추가하기(v0.0.20-alpha 이상 부터)

해당 SDK를 사용하기 위해서는 카메라 접근 권한이 필요합니다. 카메라 기능은 QR코드 형식의 주소를 인식하는데 필수적입니다. [참고: react-native-permission]

Podfile 수정하기

퍼미션을 설정하기 위해서 Podfile에서 설정 스크립트를 세팅해줘야 합니다.

# with react-native >= 0.72
- # Resolve react_native_pods.rb with node to allow for hoisting
- require Pod::Executable.execute_command('node', ['-p',
-   'require.resolve(
-     "react-native/scripts/react_native_pods.rb",
-     {paths: [process.argv[1]]},
-   )', __dir__]).strip
+ def node_require(script)
+   # Resolve script with node to allow for hoisting
+   require Pod::Executable.execute_command('node', ['-p',
+     "require.resolve(
+       '#{script}',
+       {paths: [process.argv[1]]},
+     )", __dir__]).strip
+ end
+ node_require('react-native/scripts/react_native_pods.rb')
+ node_require('react-native-permissions/scripts/setup.rb')
# with react-native < 0.72
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+ require_relative '../node_modules/react-native-permissions/scripts/setup'

카메라 권한을 setup_permission에 추가해야 합니다.

# …
platform :ios, min_ios_version_supported
prepare_react_native_project!
# ⬇️ uncomment wanted permissions
setup_permissions([
  'Camera',
])
# …

pod install 을실행 하여 설정을 업데이트 합니다.

Info.plist파일 수정하기

<?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>
  <!-- 🚨 Keep only the permissions used in your app 🚨 -->
  <key>NSCameraUsageDescription</key>
  <string>YOUR TEXT</string>
  <!-- … -->
</dict>
</plist>

Android 인 경우

AndroidManifest 수정하기

위핀 Activity의 인텐트 필터 추가

위핀을 사용하고자 하는 앱의 AndroidManifest.xml을 수정해야 합니다.

위핀 Activity의 인텐트 필터를 앱의 AndroidManifest.xml 에 추가해야 합니다. 이 때 추가하는 스키마 값은 wepin. + wepin app id 로 추가해야 합니다.

변경 사항 안내: 딥링크 스킴값 변경 (SDK Version 0.0.20-alpha이상부터)

SDK 버전 0.0.20 이상을 사용할 경우, 딥링크 스킴 값의 구조가 업데이트 되었음을 알려드립니다.

  • 변경 전: pakage name + '.wepin'

  • 변경 후: 'wepin.' + wepin app id

Wepin 위젯 기능 사용을 위해 올바른 딥링크 스킴값 사용이 필수적입니다. Wepin 위젯의 정확한 동작을 위해 새로운 스킴 값을 적용해주시기 바랍니다.

<activity
	android:name=".MainActivity" 
	....
>
	....
        <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="wepin.${wepin appId}" /> 
            <!-- 'wepin' + wepin app id -->
        </intent-filter>
      </activity>

퍼미션 추가하기(v0.0.20-alpha 이상 부터)

해당 SDK를 사용하기 위해서는 카메라 접근 권한이 필요합니다. 카메라 기능은 QR코드 형식의 주소를 인식하는데 필수적입니다. [참고: react-native-permission]

위핀을 사용하고자 하는 앱의 메인 Activity에 아래와 같이 퍼미션을 추가합니다. 

<uses-permission android:name="android.permission.CAMERA" />

릴리즈

릴리즈된 패키지 버전은 아래 깃허브에서 확인 가능합니다.

PreviousReact Native SDKNext초기화하기

Last updated