使用无离子的电容器-社区/ADMOB

Question

我最近将我的旧Cordova iOS/Android项目迁移到了Caperaction，到目前为止我对此非常满意。但是，在尝试使用电容器文档Capable-Community/AdMob中推荐的AdMob插件时遇到了困难，因为该插件的文档只显示了ionic与angular或ionic与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一起工作的情况吗？

Answer 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