使用没有离子的电容器社区/admob答案

【问题标题】：Using capacitor-community/admob without ionic使用没有离子的电容器社区/admob
【发布时间】：2020-11-25 19:50:09
【问题描述】：

我最近将旧的 Cordova iOS/Android 项目迁移到了 Capacitor，到目前为止我对它非常满意。但是，尝试使用 Capacitor 文档capacitor-community/admob 中推荐的 AdMob 插件时遇到了麻烦，因为该插件的文档仅显示了 ionic with angular 或 ionic with react 的示例。由于该项目是在该生态系统之外开始的，因此我没有使用任何一种方法，因此我对这个 ionic/react 示例并试图弄清楚如何在没有这些框架中的任何一个的情况下实现它有点不知所措。

import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { IonApp, IonRouterOutlet, isPlatform } from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import Home from './pages/Home';

import { Plugins } from '@capacitor/core';
import { AdOptions, AdSize, AdPosition } from '@capacitor-community/admob';
const { AdMob } = Plugins;

const App: React.FC = () => {

  AdMob.initialize();

  const adId = {
    ios: 'ios-value-here',
    android: 'android-value-here'
  }

  const platformAdId = isPlatform('android') ? adId.android : adId.ios;

  const options: AdOptions = {
    adId: platformAdId,
    adSize: AdSize.BANNER,
    position: AdPosition.BOTTOM_CENTER,
    margin: 0,
    // isTesting: true
  }

  AdMob.showBanner(options);

  // Subscibe Banner Event Listener
  AdMob.addListener('onAdLoaded', (info: boolean) => {
    console.log("Banner ad loaded");
  });

  // Get Banner Size
  AdMob.addListener('onAdSize', (info: boolean) => {
    console.log(info);
  });

  return (
    <IonApp>
      <IonReactRouter>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/home" />} />
        </IonRouterOutlet>
      </IonReactRouter>
    </IonApp>
  );

};

export default App;

我希望这只是因为我不熟悉 ionic/react 以了解 const App: React.FC = () => { 实际在做什么，并且有一种方法可以不这样做。

或者，电容器社区插件是否仅适用于 Ionic？

【问题讨论】：

Capacitor 根本不需要 Ionic，它可以与任何 JS 框架或 Vanilla JS 一起使用。 Capacitor 社区插件只需要 Capacitor。
我理解，但是由于文档仅显示了与 Ionic 一起使用的示例，因此我对如何在 Vanilla JS 中实现这一点一无所知，因此提出了问题。
我在你的另一个问题中回答的同样的事情也适用于这里stackoverflow.com/a/63207383/1351469
当然，你是绝对正确的——我以为它会比这更复杂，但经过一些语法试验和错误，现在它可以工作了！

标签： reactjs ionic-framework capacitor

【解决方案1】：

因为你使用的是电容器，所以你可以使用任何 Cordova 插件。

npm install cordova-plugin-name
npx cap sync

这是一个你可以使用的cordova插件：https://github.com/ratson/cordova-plugin-admob-free
参考：https://capacitorjs.com/docs/cordova/using-cordova-plugins#installing-cordova-plugins

【讨论】：

我希望使用电容器插件，但如果没有更好的答案，我会接受这个。