reactjs - InAppBrowser 未在 Ionic React App 中打开

Question

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

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

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

根据 Ionic Docs，它说他们支持 Cordova 插件，但这并没有做任何事情。

我是 Ionic 的新手，我错过了什么吗？

Answer 1

InAppBrowser是一个科尔多瓦插件。我建议使用 Capacitor 的插件Browser

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

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

const { Browser } = Plugins;

...

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

Answer 2

你只需要browser.show()打开窗口。首先执行脚本然后显示它，通过文档你可以使用选项来配置视图一点点。我找不到将 InAppBrowser 用作 React 组件之类的方法，.

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>
    );
};