为react native 添加谷歌的AdMob广告插件

首先要为react native添加谷歌的AdMob广告插件首先我们要知道插件的名称，那就是react-native-admob插件。
react-native-admob插件
其次要在AdMob中注册一个账号。(这个可能需要有正确的上网姿势，当然如果只是想对这个插件进行测试练习的话，没有注册账号应该也能用)。

这个插件主要是把Google AdMob广告的sdk进行封装使用，让我们也能够简单的使用，目前正在开发第二个版本，已经在测试阶段虽然说是测试但用起来还是没有问题的。

关注公众号“投手网”，查看隐藏内容

使用微信扫描二维码关注公众号后，回复“查看码”获取查看码

查看

npm install rnpm -g

link成功之后你应该会有类似的输出情况

在link成功之后我们还有react-native run-android 重新安装一下，在run-android的过程中可能会遇到类似这种错误

这时候就应该在项目中

cd android
在输入 gradlew clean
cd ../
重新运行 react-native run-android应该就没问题了

好了做完以上操作我们可以开始进行使用了，不过我们在使用的过程中用到一些测试广告的unitsid

这里会展示横幅广告和插页广告的使用
首先是导入文件

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

横幅广告

横幅广告的代码

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

adSize是设置广告的大小

在Android中smartBannerPortrait和smartBannerLandscape都是用smartBanner这个值作为代替。

adUnitID表示的是对应广告的unitsID，等正式只用的时候填写真实的unitsID即可

testDevices是填写测试的设备或模拟器的id，这个不填也可以在真正使用的时候建议把它删了。

onAdFailedToLoad是接受一个方法。当广告请求失败时调用。

当请求成功之后会返回一个测试广告出来，就像这样(当然有时候你可能要等待一会才会出现)

插页广告

插页广告代码

componentDidMount() {
    AdMobInterstitial.setAdUnitID('your-admob-unit-id');
    AdMobInterstitial.setTestDevices([AdMobInterstitial.simulatorId]);
    AdMobInterstitial.requestAd().then(() => AdMobInterstitial.showAd()); }

setAdUnitID表示的是对应广告的unitsid，等正式只用的时候填写真实的unitsid即可。

setTestDevices是填写测试的设备或模拟器的id，这个不填也可以在真正使用的时候 建议把它删了。

requestAd()方法表示请求插页式广告并返回一个promise，该promise可解决加载错误和拒绝错误。

showAd()该方法显示插页式广告并返回promise，该promise会在广告将要展示时解析，并在广告未准备好展示时拒绝显示。

你可以将componentDidMount()函数中的代码放在你自己写的方法里，也可以放在react natvie的生命周期里面。

当请求成功之后会返回一个占满整个屏幕测试广告出来，就像这样(当然有时候你可能要等待一会才会出现)。

最后说一下在使用正式UnitID时可能会发生的情况。
在使用测试广告时正确显示出了测试的广告，但在使用正式的UnitID却会返回一个这要的错误信息

1.首先要说明的是你在注册成功AdMob账号并且为你的应用添加好新的广告单元时是要等待1~2两个小时左右才会有广告推送的。

2.你要确认你的AdMob账号中的付款功能是开通的，因为如果付款功能没有开通的话goole那边是不会进行广告的推送的。

3.可以把testDevices，这个属性删了试试看。

如果以上操作都不能帮到你的话，我也没有太多的办法。

在使用的过程中请确保指定了对应类型的广告单元。比如Interstitial广告跟Banner类型的广告不通用。