En Ionic 6, estoy mostrando una hoja de acción cuando se hace clic en un elemento de la lista. Funciona bien en el navegador, pero cuando lo pruebo en mi iPhone, la hoja de acción nunca aparece.
Para probar en mi iPhone estoy usando estos comandos:
ionic capacitor copy ios ionic capacitor open iosAquí está mi código:
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> ); } } Cuando se ejecuta en mi iPhone, en el registro veo '1' pero no '2' o '3'. Eso me hace pensar que await actionSheetController.create(...) nunca se cumple. Simplemente no tengo idea de por qué.
Editar: aquí está el registro de la ejecución de la aplicación en mi 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] - 1Toqué el elemento de la lista 3 veces tratando de que apareciera la hoja de acción. Debería registrar '1 2 3', '1 2 3', '1 2 3' (ver código arriba). Esto es lo que me hace pensar que la promesa de la hoja de acción nunca se está cumpliendo.
Nuevamente, esto funciona bien en el navegador, pero no muestra la hoja de acción cuando se ejecuta en iOS.
Aquí está el archivo de código completo , si eso ayuda.
Hay 2 formas de hacerlo en React:
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> ); }; 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> ); } Intenta seguir la documentación de React. Me parece que está intentando implementarlo utilizando el método Angular en un proyecto React. Es por eso que la await actionSheetController.create(...) no funciona (creo).
Vea más sobre cómo usarlo aquí: https://ionicframework.com/docs/api/action-sheet#usage