WEPIN Developer Documentation
WepinBlogContact
한국어
한국어
  • 시작하기
    • 소개
  • 위핀
    • 특징
    • 아키텍처
      • 키 생성
      • 서명
      • 키 백업
    • 워크스페이스
      • 앱 등록 및 키 발급
      • 네트워크 및 자산 추가
      • 위젯 디자인
    • 지원 블록체인
    • 계정 추상화
  • 로그인
    • 개요
    • 소셜 로그인 인증 프로바이더
      • Email/Password
      • Google
      • Apple
      • Discord
      • Naver
      • Facebook
      • Line
      • Kakao
    • 사용자 인터페이스
    • 로그인 일원화
    • 리소스
  • 위젯 연동
    • 사전 준비
    • Web: JavaScript SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
        • Kaia Provider
        • Solana Provider
        • Wagmi Connector
      • 월렛 어댑터
        • Solana Wallet Adapter
    • Android: Java & Kotlin SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • iOS: Swift SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
    • Flutter SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 핀 패드
        • 설치
        • 초기화하기
        • 메서드
    • React Native SDK
      • 로그인
        • 설치
        • 초기화
        • 메서드
    • Unity SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Compose Multiplatform SDK
      • 로그인
        • 설치
        • 초기화하기
        • 메서드
      • 위젯
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
  • API
    • 개요
    • 등록 절차
    • 로그인
    • 지갑 생성 및 관리
    • 토큰 및 NFT 조회
    • 트랜잭션
  • Deprecated
    • Web: JavaScript SDK
      • SDK
        • 설치
        • 초기화하기
        • 메서드
        • 확인하기
      • 프로바이더
        • Ethereum Provider
      • Wagmi Connector
    • Android: Java & Kotlin SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • iOS: Swift SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • Flutter SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
    • React Native SDK
      • 설치
      • 초기화하기
      • 메서드
      • 확인하기
      • 프로바이더
        • EVM 호환
  • 기타
    • 로고 & 브랜드 가이드라인
Powered by GitBook
On this page
  • 요구사항
  • 설치하기
  • Wepin 설치하기
  • peerDependencies
  • 추가 설치 (version '0.0.7-alpha' and above)
  • iOS 인 경우
  • AppDelegate.mm 수정하기
  • Info 수정하기
  • 퍼미션 추가하기(v0.0.20-alpha 이상 부터)
  • Android 인 경우
  • AndroidManifest 수정하기
  • 릴리즈

Was this helpful?

  1. Deprecated
  2. React Native SDK

설치

요구사항

  • React Native version 0.71.8 이상

설치하기

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

Wepin 설치하기

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

npm install @wepin/react-native-sdk
yarn add @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 이상 부터)

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 이상 부터)

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

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

릴리즈

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

PreviousReact Native SDKNext초기화하기

Last updated 8 months ago

Was this helpful?

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

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

react-native-permission
react-native-permission
LogoGitHub - WepinWallet/wepin-react-native-sdk: Wepin React Native SDK for Android OS and iOSGitHub