1
votes

Ionic + React: Quittez l'application après avoir cliqué sur le bouton Retour sur le matériel

J'utilise Ionic avec React pour développer une application. Je n'ai trouvé aucune documentation sur la façon de gérer le clic du bouton de retour matériel et sur la façon de quitter l'application. Existe-t-il des documents ou des didacticiels à ce sujet?

reactjs ionic4

4 commentaires

Regardez ici forum.ionicframework.com/ t / bouton-retour-matériel-avec-ionique-4‌ /…

@AzzamAsghar il y a des décisions juste pour angulaire

Vous avez raison, je ne suis pas sûr, mais je suppose que le service platform n'est pas disponible en react car il est en angular . Jetez un œil ici. La réponse acceptée a quelques solutions de contournement intéressantes, peut-être que vous les faites fonctionner pour vous stackoverflow.com/questions/51728175/...

@AzzamAsghar Merci, je trouve des réponses dans la documentation sur les condensateurs

3 Réponses :

1
votes

Pour quitter l'application après avoir cliqué sur le bouton Retour sur le matériel, vous devez d'abord empêcher le retour de l'historique par défaut. https://ionicframework.com/docs/react/config

import { Plugins, Capacitor } from '@capacitor/core'

  ...

  useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener('backButton', e => {
           // Use of location.pathname is also correct
        if (window.location.pathname === '/') {
          Plugins.App.exitApp()
        } else if (window.location.pathname === '/detail') {
          history.push('/')
        } else {
          history.back()
        }
      })
    }
  }, []) // eslint-disable-line
...

2 commentaires

Cela n'empêchera-t-il pas le bouton de retour de fermer d'autres vues comme un modal?

@DevYego vous avez raison. Le code ci-dessus ne peut pas traiter d'autres vues comme un modal. Je ne trouve aucune solution dans le document de réaction ionique. Je pense donc que nous devons sauvegarder l'état ouvert d'une autre vue avec un store comme mobx, redux, etc. Ensuite, appuyez sur le bouton Retour, l'autre vue doit être fermée.

6
votes

Importez-les dans le fichier App.tsx

useEffect(() => {
    if (Capacitor.isNative) {
      Plugins.App.addListener("backButton", (e) => {
        if (window.location.pathname === "/") {
          // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } else if (window.location.pathname === "/YourFirstPageRoute") {
           // Show A Confirm Box For User to exit app or not
          let ans = window.confirm("Are you sure");
          if (ans) {
            Plugins.App.exitApp();
          } 
        } 
      });
    }
  }, []);

Créez un effet pour gérer le bouton de retour

import React, { useEffect } from "react";
import { Plugins, Capacitor } from "@capacitor/core";

1 commentaires

dois-je aussi setupConfig ({hardwareBackButton: false})? Rien ne s'est passé quand je l'ai fait

0
votes

Eh bien, vous pouvez faire une alerte de confirmation avant la sortie sur votre page principale / home / dashboard. J'ai ajouté IonAlert avec 2 boutons. Veuillez consulter mon code de travail dans l'appareil réel ci-dessous:

import React, {useState } from 'react';
import { IonAlert } from '@ionic/react';
import { Plugins } from "@capacitor/core";

const HomePage: React.FC = () => {
  const { App } = Plugins;
  const [showBackAlert, setShowBackAlert] = useState(false);

 // listening to ionic back button event
 document.addEventListener('ionBackButton', (ev: any) => {
    ev.detail.register(-1, () => {
      // when you are in your home(last) page
      if (history.location.pathname === '/home') {
        // calling alert box
        setShowBackAlert(true);
      }
    });
  });

return (
    <IonPage>
       <IonAlert
          isOpen={showBackAlert}
          header={'Please Confirm!'}
          message={'Do you really want to exit our App?'}
          buttons={[
            {
              text: 'Nope',
              role: 'cancel',
              cssClass: 'secondary',
              handler: () => {}
            },
            {
              text: 'Yeah',
              handler: () => {
                App.exitApp();
              }
            }
          ]}
          onDidDismiss={() => setShowBackAlert(false)}
          cssClass='my-custom-class'
        />
 </IonPage >
  );
};

export default HomePage;

2 commentaires

Je suis intéressé par la façon dont vous déboguerez cette console.log lors de l'exécution sur un appareil. Cette méthode ne fonctionne pas pour moi, j'ai essayé d'utiliser les toasts natifs pour voir si cet auditeur est jamais appelé mais rien.

Non, ces journaux de console sont uniquement à des fins de test Chrome. Permettez-moi de les supprimer maintenant, mais cette méthode fonctionne parfaitement sur mon application. Téléchargez et vérifiez ( play.google.com/store/apps/ détails? id = com.kialabs.bingesear‌ ch ).