기본 설정

1. SDK 설치

• Android

아래 page 의 AdPopcornSSP Android SDK 설치 및 Manifest.xml 설정까지 확인하여 앱 내 세팅해줍니다.

기본 설정

• iOS

아래 page 의 AdPopcornSSP iOS SDK 설치 및 IDFA 설정까지 확인하여 앱 내 세팅하여 줍니다.

기본 설정

2. 플러그인 설치

현재는 베타 버전으로 npm 을 통한 설치는 지원하지 않으며, 수동 설치 만을 지원합니다.

[플러그인 다운로드 링크]

2.1 Android

• 위 압축 파일에 들어있는 android 폴더를 프로젝트 내 ../android/app/src/main/java/{packagename}경로에 추가합니다.

• android 프로젝트 내 MainApplication.java 파일에서 RNAdPopcornSSPPackage 선언을 추가합니다.

JAVA

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
        @Override
        protected List<ReactPackage> getPackages() {
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add(new RNAdPopcornSSPPackage());
          return packages;
        }
}

ex> RNAdPopcornSSPPackage import 시 설치 경로의 packagename 부분이 com/adpopcornsspreactplugin 이라면, 아래와 같이 import 해와야 합니다.

package com.adpopcornsspreactplugin;
import com.adpopcornsspreactplugin.adpopcorn.RNAdPopcornSSPPackage;

2.2 iOS

• 위 압축 파일에 들어있는 ios 폴더를 프로젝트 내에 추가합니다.

• Xcode 프로젝트 내에 추가한 14개의 파일을 Add 해줍니다.

• 파일을 모두 add 할 경우 아래와 같이 xcode에서 보이게 됩니다.

2.3 배너, 네이티브 뷰 설정

배너, 네이티브 연동을 하고자 할 경우에는 플러그인 압축 파일 내 src 폴더에 들어 있는 AdPopcornBanner.tsx, AdPopcornNative.tsx 파일을 react 프로젝트 내 src/ads/adpopcornssp/ 경로에 추가해줍니다.

3. 초기화

앱 시작 시, RNAdPopcornSSPModule 를 이용하여 init function을 호출하여줍니다.

JavaScript

import React, { useEffect } from 'react';
import {
  NativeModules,
  NativeEventEmitter
} from 'react-native';

const RNAdPopcornSSPModule = NativeModules.RNAdPopcornSSPModule;

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };
  RNAdPopcornSSPModule.init('your app key');
  ....
}