InAppBrowser无法在Ionic React App中打开

问题描述

import { InAppbrowser } from '@ionic-native/in-app-browser';

useEffect(() => {
  const browser = InAppbrowser.create('https://ionicframework.com','_blank');
},[//deps])

我无法使用电容器的Browser插件，因为我需要在InAppbrowser中执行几行代码。

根据Ionic Docs的说法，它们支持Cordova插件，但这无能为力。

我是Ionic的新手，我想念东西吗？

解决方法

InAppBrowser是Cordova插件。我建议使用电容器的插件Browser

为此，您需要从Capacitor导入Browser插件。

import { Plugins } from '@capacitor/core';

const { Browser } = Plugins;

...

<IonButton onClick={
  async() => await Browser.open({
    url: 'http://capacitorjs.com/'
  });
}>Open Browser</IonButton>

,

您只需要browser.show()即可打开窗口。首先执行scripts然后显示它，通过docs，您可以使用Options稍微配置视图。我找不到将InAppBrowser用作React Component之类的方法。

import React from 'react';
import { IonPage,IonButton } from '@ionic/react';
import { InAppBrowser,InAppBrowserOptions } from '@ionic-native/in-app-browser';

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

    const options:InAppBrowserOptions = {
        location: 'no',zoom: 'no',hideurlbar: 'yes',toolbarposition: 'bottom'
    } 

    const openBrowser = (url: string) => {
        const browser = InAppBrowser.create(url,'_self',options);
        // browser.executeScript(your script) // Docs aren't clear to me and i haven't tested
        browser.show()
    }

    return (
        <IonPage>
            <IonButton onClick={()=> openBrowser('https://google.com')}>Open InAppBrowser</IonButton>
        </IonPage>
    );
};