react-native-admob

* RN프로젝트에 Admob붙이기

firebase의 많은 기능중, admob많을 목표로 하는분들을 위한 글입니다.

react-native-admob으로 react-native앱에 광고를 간편히 붙일 수 있습니다.

 

FB 환경을 세팅해 직접 해주려고도 해봤지만,

광고를 붙이는것만이 목적이라면 해당 모듈을 사용하는것이 아주 속편한 방법입니다.

시간적으로 절약되는것은 물론입니다.

 

일단, 설치해볼까요.

npm install react-native-admob

react-native link react-native-admob

(현재 환경은 RN 0.59.8, react-native-admob버전은 1.3.2입니다)

 

* 에러?

먼저, 해당 라이브러리를 설치하니 style undeinfed와 같은 에러가 발생하였습니다.

해당 에러파일을 찾아가보니 react버전문제로 발생한 에러였습니다.

라이브러리에서는 react.PropTypes....와 같은 코드를 사용했지만,

현재 환경에서는 지원하지 않는 기능이었고, PropTypes를 import 하여 코드를  PropTypes....으로 수정해주었다.

 

 

* 본격 세팅

firebase console에서 admob key를 간단히 발급받을 수 있습니다.

key를 발급받는 것 외의 환경세팅은 사실 필요없습니다. 해당 라이브러리를 사용한다면요.

세팅이 완료되었다면 코드를 넣어야 하는데요.

admob은 테스트용 키가 별도로 있습니다.

테스트할때는 test key로 확인해야하고, 배포할때는 발급받은 배포용 키를 적용해야 합니다.

 

* 테스트 단계에서 Key

https://developers.google.com/admob/android/test-ads#sample_ad_units

테스트 광고  |  Android  |  Google Developers

 

 

* 그외 체크해볼만한 환경 세팅

https://developers.google.com/admob/ios/quick-start#import_the_mobile_ads_sdk

시작하기  |  iOS  |  Google Developers

 

* 코드블럭

 

 

* 사실은..

세팅과정에서 많은 난항을 겪었습니다. 해당 라이브러리의 버전문제가 심각했던것도 있고,

AndroidX의 문제도 겹쳐버려서요.

 

AndroidX문제는 다음과 같이 해결하였습니다. 제법 오랜시간이 걸렸네요!

1. jetify를 통해 androidX문제를 해결!

2. 아래의 지침에 따라 해당 라이브러리의 문제를 해결!

 

 

 

 

---

웹사이트 개발 / 홈페이지 제작 / android앱 개발 / ios 앱 개발 / server / client / aws / fullstack / buisness partner / 외주 / 용역

https://open.kakao.com/o/sNETgUJb

http://self-made.cloud