좌충우돌 개발 블로그

react-native-webview를 사용할 때 gradle.properties에 다음을 추가해야 한다.

android.useAndroidX=true
android.enableJetifier=true

추가한 후에 빌드할 때 react-native-admob에서 빌드 실패가 나는 경우가 발생한다.

> Task :react-native-admob:compileDebugJavaWithJavac FAILED

이런 경우 jetifier를 설치하면 해결할 수 있다.

$ npm install --save-dev jetifier
$ npx jetify

참고 문헌

1. https://github.com/facebook/react-native/issues/25307

2. https://stackoverflow.com/questions/53235525/issues-using-androidx-and-react-native

react-native로 만든 앱에 광고를 넣기 위해 react-native-admob을 사용했다.(안드로이드만 사용)

$ npm i --save react-native-admob@next
$ react-native link react-native-admob@next

android/app/build.gradle에 다음을 추가한다.

dependencies {
    ...
    implementation "com.google.firebase:firebase-core:17.0.0"
    implementation "com.google.firebase:firebase-ads:17.2.1"
}

사용법은 다음과 같다.

import {
  AdMobBanner,
  AdMobInterstitial,
  PublisherBanner,
  AdMobRewarded,
} from 'react-native-admob'

// 배너 광고
<AdMobBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[AdMobBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
/>

// DFP(Doubleclick For Publisher) - 조건을 상세하게 커스터마이징할 수 있는 배너
<PublisherBanner
  adSize="fullBanner"
  adUnitID="your-admob-unit-id"
  testDevices={[PublisherBanner.simulatorId]}
  onAdFailedToLoad={error => console.error(error)}
  onAppEvent={event => console.log(event.name, event.info)}
/>

// 전면 광고
AdMobInterstitial.setAdUnitID('your-admob-unit-id');
AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd());

// 리워드 광고
AdMobRewarded.setAdUnitID('your-admob-unit-id');
AdMobRewarded.requestAd().then(() => AdMobRewarded.showAd());

배너 광고를 추가한 뒤 에뮬레이터로 확인하면 경고가 뜨는데 이 경우엔 다음과 같이 하면 해결할 수 있다.

node_modules/react-native-admob/RNAdMobBanner.js에서

UIManager.RNGADBannerView.Commands.loadBanner를

UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner로 변경하면 된다.

27  loadBanner() {
28    UIManager.dispatchViewManagerCommand(
29      findNodeHandle(this._bannerView),
30      UIManager.getViewManagerConfig('RNGADBannerView').Commands.loadBanner,
31      null,
32    );
33  }

참고 문헌

1. https://github.com/sbugert/react-native-admob/issues/339

UPDATE

React Native에서 특정 폰트를 사용하기 위해서 폰트를 추가해야하는데 다음과 같이 하면 된다.

1. fonts 디렉토리를 만들어 폰트를 넣어준다.

   react-native-app
   │   README.md
   │   index.ios.js
   │   index.android.js
   └── ios
   └── android
   └── src
   │   │
   │   └── assets
   │       └── fonts
   │            └── 폰트

2. package.json에 다음을 추가한다.

   ...
   "rnpm": {
    "assets": [
      "src/assets/fonts"
    ]
   }

3. 다음 명령어를 실행하면 ios/andorid에 자동으로 폰트가 추가된다.

   $ react-native link

4. 다음처럼 스타일을 적용하는 부분에 넣어 사용하면 된다.

   fontFamily: '폰트이름'

참고 문헌

1. https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4

앱을 출시하기 위해서 빌드를 해야한다.

1. keytool로 업로드 키를 생성한다.
   my-upload-key.keystore와 my-key-alias는 변경해도 된다.

   $ keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

2. android/gradle.properties에 다음을 추가한다.

   MYAPP_UPLOAD_STORE_FILE=my-upload-key.keystore
   MYAPP_UPLOAD_KEY_ALIAS=my-key-alias
   MYAPP_UPLOAD_STORE_PASSWORD=*****
   MYAPP_UPLOAD_KEY_PASSWORD=*****

3. android/app/build.gradle에 다음을 추가한다.

   ...
   android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                storeFile file(MYAPP_UPLOAD_STORE_FILE)
                storePassword MYAPP_UPLOAD_STORE_PASSWORD
                keyAlias MYAPP_UPLOAD_KEY_ALIAS
                keyPassword MYAPP_UPLOAD_KEY_PASSWORD
            }
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
   }
   ...

4. 릴리스용 APK를 생성한다.

   $ cd android
   $ ./gradlew bundleRelease

   andorid/app/build/outputs/bundle/release에 app.aab로 생성된다.

5. CPU 아키텍처별로 APK를 생성한다.

   ...
   def enableSeparateBuildPerCPUArchitecture = true
   ...

   ./gradlew assembleRelease를 실행하면 CPU 아키텍처별로
   andorid/app/build/outputs/apk/release에 APK가 생성된다.

6. android/app/build.gradle에 다음을 변경하면 파일 크기를 줄일 수 있다.

   ...
   def enableProguardInReleaseBuilds = true
   ...

참고 문헌

1. https://facebook.github.io/react-native/docs/signed-apk-android