如何在 React 原生应用中展示广告

Question

有一些

用于广告的 react 原生组件，但其中一些不适用于当前版本的 react native。（例如，React-native-AdMob）。 严重缺乏关于在 react native 中展示广告的信息，我似乎无法弄清楚大多数人是如何做到这一点的。 每个人都真的编写自己的本机 UI 组件来完成此操作吗？react-native-admob 真的是目前使用 admob 的唯一方法吗？ 我只是完全错过了一些简单的方法来做到这一点吗？

Answer 1

你可以尝试使用 https://github.com/axemclion/react-native-cordova-plugin 和 https://github.com/appfeel/admob-google-cordova：

$ npm install react-native-cordova-plugin --save
$ node_modules/.bin/cordova-plugin add cordova-plugin-camera cordova-admob

在 android/settings.gradle 中：

 include ':app'
+ include ':cordovaplugin'
+ project(':cordovaplugin').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-cordova-plugin/framework/android')

在android/app/build.gradle中：

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules    ...
+   compile project(':cordovaplugin')
}

In android/app/src/main/java/com/appname/MainActivity.java

...
+  import io.cordova.reactnative.CordovaPluginPackage;
...
public class MainActivity extends ReactActivity {
     ...
     @Override
     protected List<ReactPackage> getPackages() {
         return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
+                cordovaPluginPackage = new CordovaPluginPackage(this)
         );
     }
+    private CordovaPluginPackage cordovaPluginPackage;
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+        cordovaPluginPackage.setSavedInstanceState(savedInstanceState);
+    }
+    @Override
+    public void onActivityResult(int requestCode, int resultCode, Intent intent) {
+        super.onActivityResult(requestCode, resultCode, intent);
+        cordovaPluginPackage.onActivityResult(requestCode, resultCode, intent);
+    }
}

在 index.android .js 或任何其他组件中：

var Cordova = require('react-native-cordova-plugin');
Cordova.navigator.admob.createBannerView({publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB"});
Cordova.addEventListener(Cordova.navigator.admob.events.onAdLoaded, onEvent);

Answer 2

react-native-admob设置起来很痛苦。我开始怀疑自己是否坏了。但事实并非如此，您只需要设置一些东西。针对 Android 进行设置是我最大的问题，但我发现此演练指南可以提供帮助：

https://pradnyachoudhari.wordpress.com/2019/03/22/integrating-google-admob-in-react-native-android-project/

还有适用于 IOS 的演练。

我

遵循了它，它对我有用，尽管您不需要将包添加到 MainApplication.java，只需导入它就可以了。

希望这有帮助！