将 admob 集成到 React Native CLI 中

Question

几天来我一直在尝试将 admob 集成到我的 React Native 项目中，我尝试了很多来自 npm 的包但没有成功，我使用了 react-native-admob、@react-native-admob/admob 和 react-native-admob-native。全部以构建错误结束。我也尝试解决错误，但没有任何效果。加上 good 和 youtube 上的教程，除了死路一条，我什么都跟着做了。

以下错误来自 react-native-admob，同样的错误来自 @react-native-admob/admob，当然包名不同。我也尝试了不同版本的包，以同样的错误结束

\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobBannerViewManager.java:1: error: cannot access com.sbugert.rnadmob
package com.sbugert.rnadmob;
^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:18: error: cannot access java.lang
public class RNAdMobInterstitialAdModule extends ReactContextBaseJavaModule {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:18: error: cannot find symbol
public class RNAdMobInterstitialAdModule extends ReactContextBaseJavaModule {
                                                 ^
  symbol: class ReactContextBaseJavaModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:19: error: cannot find symbol
  InterstitialAd mInterstitialAd;
  ^
  symbol:   class InterstitialAd
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:20: error: cannot find symbol
  String adUnitID;
  ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:21: error: cannot find symbol
  String testDeviceID;
  ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:22: error: cannot find symbol
  Callback requestAdCallback;
  ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:23: error: cannot find symbol
  Callback showAdCallback;
  ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:26: error: cannot find symbol
  public String getName() {
         ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:30: error: cannot find symbol
  public RNAdMobInterstitialAdModule(ReactApplicationContext reactContext) {
                                     ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:82: error: cannot find symbol
  private void sendEvent(String eventName, @Nullable WritableMap params) {
                         ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:82: error: cannot find symbol
  private void sendEvent(String eventName, @Nullable WritableMap params) {
                                                     ^
  symbol:   class WritableMap
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:87: error: cannot find symbol
  public void setAdUnitID(String adUnitID) {
                          ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:92: error: cannot find symbol
  public void setTestDeviceID(String testDeviceID) {
                              ^
  symbol:   class String
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:97: error: cannot find symbol
  public void requestAd(final Callback callback) {
                              ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:121: error: cannot find symbol
  public void showAd(final Callback callback) {
                           ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobInterstitialAdModule.java:136: error: cannot find symbol
  public void isReady(final Callback callback) {
                            ^
  symbol:   class Callback
  location: class RNAdMobInterstitialAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:14: error: cannot access com.sbugert
public class RNAdMobPackage implements ReactPackage {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:14: error: cannot find symbol
public class RNAdMobPackage implements ReactPackage {
                                       ^
  symbol: class ReactPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
                                                  ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:17: error: cannot find symbol
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
                ^
  symbol:   class NativeModule
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:25: error: cannot find symbol
    public List<Class<? extends JavaScriptModule>> createJSModules() {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:25: error: cannot find symbol
    public List<Class<? extends JavaScriptModule>> createJSModules() {
                                ^
  symbol:   class JavaScriptModule
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
                                                ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
           ^
  symbol:   class List
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobPackage.java:30: error: cannot find symbol
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
                ^
  symbol:   class ViewManager
  location: class RNAdMobPackage
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot access com
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot find symbol
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
                                                  ^
  symbol: class ReactContextBaseJavaModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:20: error: cannot find symbol
public class RNAdMobRewardedVideoAdModule extends ReactContextBaseJavaModule implements RewardedVideoAdListener {
                                                                                        ^
  symbol: class RewardedVideoAdListener
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:21: error: cannot find symbol
    RewardedVideoAd mRewardedVideoAd;
    ^
  symbol:   class RewardedVideoAd
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:24: error: cannot find symbol
    Callback requestAdCallback;
    ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:25: error: cannot find symbol
    Callback showAdCallback;
    ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:32: error: cannot find symbol
    public RNAdMobRewardedVideoAdModule(ReactApplicationContext reactContext) {
                                        ^
  symbol:   class ReactApplicationContext
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:37: error: cannot find symbol
    public void onRewarded(RewardItem rewardItem) {
                           ^
  symbol:   class RewardItem
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:97: error: cannot find symbol
    private void sendEvent(String eventName, @Nullable WritableMap params) {
                                                       ^
  symbol:   class WritableMap
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:112: error: cannot find symbol
    public void requestAd(final Callback callback) {
                                ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:143: error: cannot find symbol
    public void showAd(final Callback callback) {
                             ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNAdMobRewardedVideoAdModule.java:158: error: cannot find symbol
    public void isReady(final Callback callback) {
                              ^
  symbol:   class Callback
  location: class RNAdMobRewardedVideoAdModule
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: cannot access androidx
import androidx.annotation.Nullable;
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: cannot access androidx.annotation
import androidx.annotation.Nullable;
               ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:3: error: import requires canonical name for Nullable
import androidx.annotation.Nullable;
                          ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: cannot access android
import android.util.Log;
       ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: cannot access android.util
import android.util.Log;
              ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:4: error: import requires canonical name for Log
import android.util.Log;
                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: cannot access com.facebook
import com.facebook.react.bridge.Arguments;
          ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: cannot access com.facebook.react
import com.facebook.react.bridge.Arguments;
                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:6: error: import requires canonical name for Arguments
import com.facebook.react.bridge.Arguments;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:7: error: cannot access com.facebook.react.bridge
import com.facebook.react.bridge.WritableMap;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:7: error: package com.facebook.react.bridge does not exist
import com.facebook.react.bridge.WritableMap;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:8: error: cannot access com.facebook.react.common
import com.facebook.react.common.MapBuilder;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:8: error: package com.facebook.react.common does not exist
import com.facebook.react.common.MapBuilder;
                                ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:9: error: cannot access com.facebook.react.uimanager
import com.facebook.react.uimanager.PixelUtil;
                         ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:9: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.PixelUtil;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:10: error: cannot access com.facebook.react.uimanager.annotations
import com.facebook.react.uimanager.annotations.ReactProp;
                                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:10: error: package com.facebook.react.uimanager.annotations does not exist
import com.facebook.react.uimanager.annotations.ReactProp;
                                               ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:11: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.SimpleViewManager;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:12: error: package com.facebook.react.uimanager does not exist
import com.facebook.react.uimanager.ThemedReactContext;
                                   ^
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:13: error: cannot access com.facebook.react.uimanager.events
import com.facebook.react.uimanager.events.RCTEventEmitter;
                                   ^
  zip END header not found
D:\Codes\Matt-Quiz-Personal\Mobile\node_modules\react-native-admob\android\src\main\java\com\sbugert\rnadmob\RNPublisherBannerViewManager.java:13: error: package com.facebook.react.uimanager.events does not exist
import com.facebook.react.uimanager.events.RCTEventEmitter;
                                          ^

Answer 1

我用Below package做过几个项目

Here is npm link

@react-native-admob/admob

import { View, Text } from 'react-native'
import React,{useEffect} from 'react'
import {
    FullScreenAdOptions,
    TestIds,
    useRewardedInterstitialAd,
    useRewardedAd,
  } from '@react-native-admob/admob';

  const hookOptions = {
    loadOnDismissed: true,
    requestOptions: {
      requestNonPersonalizedAdsOnly: true, 
    },
  };
export default function MyComponent() {

    const {adLoaded, adDismissed, reward, show, adLoadError,adPresented} = useRewardedAd(
        TestIds.REWARDED,// replace your ads ID
     hookOptions,
  );

     useEffect(() => {
        //some condition 
        if(adLoaded){
            show()
        }
     }, [you_dependencncy])
     
    
  return (
    <View>
      <Text>MyComponent</Text>
    </View>
  )
}

Answer 2

尝试 link 您的包到 android 文件夹并通过运行以下命令清理 gradlew：

至 link 您的依赖项：

react-native link

要清理 gradlew，请转到您的项目目录并：

cd android && ./gradlew clean

还要确保您已将 AdMob 应用程序 ID 添加到 AndroidManifest.xml 文件。 Google 移动广告 SDK 文档中对此进行了描述。

Google 移动广告 SDK 文档：https://developers.google.com/admob/android/quick-start#configure_your_app

Answer 3

所以我运行几天前就遇到了 Admob 问题并且能够解决它。按照确切的步骤进行操作，如果卡住请告诉我。

将您的项目恢复到上次工作和构建状态。
npm i react-native-google-mobile-ads
创建一个包含值的 app.json 文件 { "react-native-google-mobile-ads": { "android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx", "ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx" } }
如果您的 minCompileSDK 版本为 <31。然后把它写在你的 app/build.gradle configurations.all { resolutionStrategy { force 'androidx.work:work-runtime:2.6.0'} }
重建您的项目并按照文档建议的方式使用它。你一定能做到。

文档 link:- https://docs.page/invertase/react-native-google-mobile-ads

注意：- react-native-admob 已弃用。

Answer 4

出现此错误是因为 gradle 中的问题，在 windows 转到 /Users/{USER_NAME}/.gradle，删除所有文件夹和文件在此文件夹中并再次运行，这将解决问题

将 admob 集成到 React Native CLI 中

Integrating admob in react native cli

admob

react-native