Skip to content

Latest commit

 

History

History
183 lines (154 loc) · 5.63 KB

EXPO.md

File metadata and controls

183 lines (154 loc) · 5.63 KB
Raw

Expo에서 아임포트 연동하기

iamport-react-native는 Expo 환경에서 사용하실 수 있습니다. 또한 eject를 하지 않아도 사용 가능합니다.

이 문서에서는 eject를 하지 않은 managed 프로젝트와 eject를 한 bare 프로젝트 양 쪽에서 Expo를 설정하는 방법을 설명하고 있습니다.

Expo CLI 설치하기

$ npm install -g expo-cli

1. managed 프로젝트

managed 프로젝트는 Expo의 가장 기초적인 프로젝트 생성 방식으로 플랫폼별 네이티브 코드 없이 오직 자바스크립트 및 타입스크립트만으로 앱을 개발하는 방식입니다. Expo 자체 서버에서 빌드 및 배포를 모두 처리할 수 있습니다. ios및 android 폴더가 없기 때문에 필요한 설정들은 app.json에 적어주셔야 합니다.

1-1. Expo 서버 빌드를 위한 설정

managed로 개발하는 경우 빌드를 Expo 서버에서 원격으로 진행하게 되며 그에 따른 필수 값들을 채워야 합니다.

  • name, icon, version, 그리고 slug는 앱 공통 설정으로 필수입니다.
  • ios의 bundleIdentifier 및 buildNumber는 iOS 앱 배포 및 빌드를 위해 필수입니다.
  • android의 package 및 versionCode는 안드로이드 앱 배포 및 빌드를 위해 필수입니다.
// app.json
{
  "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname",
      "buildNumber": "1.0.0"
    },
    "android": {
      "package": "com.yourcompany.yourappname",
      "versionCode": 1
    }
  }
}

1-2. Third-party 앱 실행을 위한 설정

Expo bare 프로젝트나 일반 리액트 네이티브 프로젝트의 경우 AndroidManifest.xml 및 Info.plist에 앱 scheme 관련 설정을 작성하지만, managed 프로젝트의 경우 네이티브 코드가 없어 app.json에 대신 설정을 적어주셔야 합니다.

  • ios.infoPlist.LSApplicationQueriesSchemes에는 외부 앱 리스트를 작성합니다.
  • ios.infoPlist.NSAppTransportSecurity의 두 항목을 YES로 설정합니다.
  • android.intentFilters에 개발하시는 앱의 scheme을 설정합니다.
// app.json
{
  "expo": {
    ...,
    "ios": {
      ...
      "infoPlist": {
        "LSApplicationQueriesSchemes": [
          "kftc-bankpay",
          "ispmobile",
          "itms-apps",
          "hdcardappcardansimclick",
          "smhyundaiansimclick",
          "shinhan-sr-ansimclick",
          "smshinhanansimclick",
          "kb-acp",
          "mpocket.online.ansimclick",
          "ansimclickscard",
          "ansimclickipcollect",
          "vguardstart",
          "samsungpay",
          "scardcertiapp",
          "lottesmartpay",
          "lotteappcard",
          "cloudpay",
          "nhappcardansimclick",
          "nonghyupcardansimclick",
          "citispay",
          "citicardappkr",
          "citimobileapp",
          "kakaotalk",
          "payco",
          "chaipayment",
          "kb-auth",
          "hyundaicardappcardid",
          "com.wooricard.wcard",
          "lmslpay",
          "lguthepay-xpay",
          "liivbank",
          "supertoss"
        ],
        "NSAppTransportSecurity": {
          "NSAllowsArbitraryLoads": true,
          "NSAllowsArbitraryLoadsInWebContent": true
        }
      }
    },
    ...
    "android": {
      ...
      "intentFilters": [
        {
          "action": "VIEW",
          "category": [
            "DEFAULT",
            "BROWSABLE"
          ],
          "data": {
            "scheme": "exampleformanagedexpo"
          }
        }
      ]
    }
  }
}

1-3. 예제

2. bare 프로젝트

bare 프로젝트는 기존 managed 프로젝트에서 eject를 실행해 네이티브 코드를 사용하고자 하는 개발 방식입니다. Expo 자체 서버에서 bare 프로젝트의 빌드를 지원하고 있지 않기 때문에 앱 배포를 위해서는 로컬에서 직접 빌드하게 됩니다.

2-1. 설정 파일(app.json) 확인하기

원활한 ejecting을 위해 아래와 같이 설정되어 있는지 확인합니다.

// app.json
{
  "expo": {
    "name": "Your App Name",
    "icon": "./path/to/your/app-icon.png",
    "version": "1.0.0",
    "slug": "your-app-slug",
    "sdkVersion": "XX.0.0",
    "ios": {
      "bundleIdentifier": "com.yourcompany.yourappname"
    },
    "android": {
      "package": "com.yourcompany.yourappname"
    }
  }
}
  • IOS의 bundleIdentifier값과 Android의 package값에 알맞은 값을 넣어야 합니다.
  • name, icon 그리고 version 필드는 필수입력입니다.
  • 보다 자세한 내용은 엑스포 공식문서 Configuration with app.json을 참고해주세요.

2-2. EJECT 하기

프로젝트 폴더에서 expo 명령어를 통해 eject 합니다. android와 ios 폴더가 생성되며 필요한 dependency들이 설치됩니다.

$ expo eject

2-3. 아임포트 설치 및 링킹하기

$ yarn add iamport-react-native
$ yarn add react-native-webview

2-4. 설정하기

###2-5. 예제

2-6 콜백 함수 설정하기