操作 sheet 未显示（离子框架）

Question

在 Ionic 6 中，我在单击列表项时显示一个操作 sheet。它在浏览器中运行良好，但在我的 iPhone 上测试时，操作 sheet 从未出现。

为了测试我的 iPhone 我正在使用这些命令：

ionic capacitor copy ios
ionic capacitor open ios

这是我的代码：

class ClientItem extends React.Component<ClientItemProps> {
  constructor (props: ClientItemProps) {
    super(props);

    this.openActionSheet = this.openActionSheet.bind(this);
  }

  async openActionSheet () {

    console.log(1);

    const actionSheet = await actionSheetController.create({
      header: this.props.client.name,
      buttons: [{
        text: 'Item 1',
        icon: pencil,
        handler: () => {
          console.log('Item 1');
        }
      }, {
        text: 'Item 2',
        icon: cogOutline,
        handler: () => {
          console.log('Item 2');
        }
      }, {
        text: 'Item 3',
        role: 'destructive',
        icon: bulb,
        handler: () => {
          console.log('Item 3');
        }
      }, {
        text: 'Cancel',
        role: 'cancel',
        handler: () => {
          console.log('Cancel');
        }
      }]
    });

    console.log(2);
    await actionSheet.present();
    console.log(3);
  }

  render () {
    return (
      <IonItem className="client" onClick={this.openActionSheet}>
        <IonLabel>
          <h2 className="item-title">{this.props.client.name}</h2>
          <h3 className="item-subtitle">...</h3>
        </IonLabel>
      </IonItem>
    );
  }
}

当我的 iPhone 上运行时，我在日志中看到“1”，但看不到“2”或“3”。这让我觉得 await actionSheetController.create(...) 永远不会实现。我只是不知道为什么。

编辑： 这是我 iPhone SE 上运行应用程序的日志：

022-04-04 18:12:19.298555-0500 App[31322:12872984] KeyboardPlugin: resize mode - native
⚡️  Loading app at capacitor://localhost...
2022-04-04 18:12:19.444407-0500 App[31322:12872984] WF: === Starting WebFilter logging for process App
2022-04-04 18:12:19.444584-0500 App[31322:12872984] WF: _WebFilterIsActive returning: YES
⚡️  WebView loaded
⚡️  To Native ->  App addListener 68127606
⚡️  [log] - 1
⚡️  [log] - 1
⚡️  [log] - 1

我点击列表项 3 次试图让操作 sheet 出现。它应该记录“1 2 3”、“1 2 3”、“1 2 3”（见上面的代码）。这就是让我认为行动 sheet 承诺永远不会实现的原因。

同样，这在浏览器中工作正常，但在 iOS 上运行时不显示操作 sheet。

Here's the whole code file，如果有帮助的话。

Answer 1

在 React 中有两种方法可以做到：

与 useIonActionSheet 挂钩一起使用：

import {
  IonButton,
  IonContent,
  IonPage,
  useIonActionSheet,
} from '@ionic/react';

const ActionSheetExample: React.FC = () => {
  const [present, dismiss] = useIonActionSheet();

  return (
    <IonPage>
      <IonContent>
        <IonButton
          expand="block"
          onClick={() =>
            present({
              buttons: [{ text: 'Ok' }, { text: 'Cancel' }],
              header: 'Action Sheet'
            })
          }
        >
          Show ActionSheet
        </IonButton>
        <IonButton
          expand="block"
          onClick={() =>
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet')
          }
        >
          Show ActionSheet using params
        </IonButton>
        <IonButton
          expand="block"
          onClick={() => {
            present([{ text: 'Ok' }, { text: 'Cancel' }], 'Action Sheet');
            setTimeout(dismiss, 3000);
          }}
        >
          Show ActionSheet, hide after 3 seconds
        </IonButton>
      </IonContent>
    </IonPage>
  );
};

与 IonActionSheet 组件一起使用：


import React, { useState } from 'react';
import { IonActionSheet, IonContent, IonButton } from '@ionic/react';
import { trash, share, caretForwardCircle, heart, close } from 'ionicons/icons';

export const ActionSheetExample: React.FC = () => {
  const [showActionSheet, setShowActionSheet] = useState(false);

  return (
    <IonContent>
      <IonButton onClick={() => setShowActionSheet(true)} expand="block">
        Show Action Sheet
      </IonButton>
      <IonActionSheet
        isOpen={showActionSheet}
        onDidDismiss={() => setShowActionSheet(false)}
        cssClass='my-custom-class'
        buttons={[{
          text: 'Delete',
          role: 'destructive',
          icon: trash,
          id: 'delete-button',
          data: {
            type: 'delete'
          },
          handler: () => {
            console.log('Delete clicked');
          }
        }, {
          text: 'Share',
          icon: share,
          data: 10,
          handler: () => {
            console.log('Share clicked');
          }
        }, {
          text: 'Play (open modal)',
          icon: caretForwardCircle,
          data: 'Data value',
          handler: () => {
            console.log('Play clicked');
          }
        }, {
          text: 'Favorite',
          icon: heart,
          handler: () => {
            console.log('Favorite clicked');
          }
        }, {
          text: 'Cancel',
          icon: close,
          role: 'cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        }]}
      >
      </IonActionSheet>
    </IonContent>
  );
}

尝试遵循 React 文档。在我看来，您正在尝试在 React 项目中使用 Angular 方法来实现它。这就是 await actionSheetController.create(...) 不起作用的原因（我认为）。

在此处查看有关如何使用它的更多信息：https://ionicframework.com/docs/api/action-sheet#usage

操作 sheet 未显示（离子框架）

Action sheet not displaying (Ionic Framework)

javascript

reactjs

ionic-framework

actionsheet