3
votes

Sortie de l'application au dos, cliquez sur Android pour réagir natif?

sur Android Mi Note 3, le bouton de retour matériel ne déclenche pas le handleBackPress , lorsque je clique sur la sortie de l'application.

J'ai fait le code suivant mais le handleBackPress n'est pas appelé.

this.props.navigation.push("StatesList")

Code de navigation:

const ModalSignUp = createStackNavigator(
  {
    Signup: { screen: Signup, key: 'Signup' },
    PartyList: { screen: PartyList, key: 'PartyList' },
    StatesList: { screen: StatesList, key: 'StatesList' },

  },
  {
    initialRouteName: 'Signup',
    headerMode: 'none',
    mode: 'card',
  }
);

Naviguer:

 componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackPress);
  }

  handleBackPress = () => {
    this.goBack(); // works best when the goBack is async
    return true;
  }

Attendu:

retour, cliquez sur le bouton matériel, passez à l'écran précédent.


9 commentaires

voulez-vous désactiver la fonctionnalité du bouton de retour matériel?


Non, je ne veux pas désactiver. Mais allez à l'écran précédent lorsque vous appuyez sur le dos du matériel.


Avez-vous testé cela sur d'autres téléphones? Cela ne se produit que dans Mi Note 3 ou d'autres aussi?


Utilisation de react-navigation Vous ne pouvez pas revenir en arrière?


Oui. J'utilise la navigation de réaction. dans l'ancienne version, c'est. Travail. Dans ma plus ancienne appli, ça va.


@Vencovsky ça se passe dans tous les appareils


@VinilPrabhu oui. Navigation de réaction utilisée.


Quelle version de React-Navigation utilisez-vous?


@Vencovsky 2.18. +


5 Réponses :


0
votes

Essayez ceci:

import {BackHandler} from 'react-native';

export default class Component extends Component {
     _didFocusSubscription;
     _willBlurSubscription;
     constructor(props) {
         super(props);
         this._didFocusSubscription = props.navigation.addListener('didFocus',payload =>
            BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
         ); 
     }
  }
componentDidMount() {
        this._willBlurSubscription = this.props.navigation.addListener('willBlur', payload =>
            BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
        );
 }
componentWillUnmount() {
        this._didFocusSubscription && this._didFocusSubscription.remove();
        this._willBlurSubscription && this._willBlurSubscription.remove();
    }
onBackButtonPressAndroid = () => {
    //code when you press the back button
 };


1 commentaires

Oui, je fais également la même chose avec le code react-navigation. mais ne fonctionne pas aussi.



2
votes

Essayez d'utiliser return false au lieu de return true .


1 commentaires

Cela fonctionne à certaines occasions si vous avez bien géré l'événement



3
votes

Votre erreur peut être dans la façon dont vous obtenez la vue suivante de react-navigation .

Vous devez utiliser .push pour créer une nouvelle vue sur la pile et lorsque vous cliquez sur le bouton Précédent, le .goBack () sera déclenché.

Par défaut, le bouton Précédent fera toujours revenir la navigation sur la pile, mais si vous n'avez qu'une seule vue dans la pile (cela se produit lorsque vous n'utilisez que .navigate ), l'application sera sortie.

Je ne sais pas comment vous naviguez dans les vues, mais cela peut être une solution.

Modifier: pour résoudre ce problème, lors de la navigation dans les vues, utilisez navigation.push ('viewname') au lieu de navigation.navigate ( 'viewname') . Vous n'avez besoin d'aucune autre méthode (comme celle que vous avez posée dans la question).

Consultez également la documentation pour comprendre le fonctionnement de la navigation ou cette question


8 commentaires

Dans stacknavigation, j'ai quatre vues et je vais naviguer à la vue de fin. J'ai également ajouté tous les boutons de vue arrière. Dans quelle fonction goBack () est implémentée. Donc, le design du dos est bien. Mais si cliquez sur l'application de retour matériel, vous quittez.


mais vous utilisez .push ou .navigate ?


naviguer est utilisé


@KiritModi s'il vous plaît vérifier ma réponse, si vous voulez revenir sur le bouton de retour, utilisez .push () au lieu de .navigate () , c'est pourquoi l'application se ferme au lieu de revenir à la vue précédente


s'il vous plaît montrer ce que vous avez changé, les endroits où vous naviguez dans les vues


Continuons cette discussion dans le chat .


Merci pour l'aide, j'ai enfin la solution. J'en répondrai.


Voir ma réponse c'est utile.



0
votes

Essayez-le ... celui-ci fonctionne pour moi: dans componentWillUnmount

goback = () => {
   if (condition2) 
     // handling
    return something;

  if (condition2)
   // handling
   return something;

  // default:
  return true;
};

Aussi, assurez-vous dans chaque cas de cocher votre this.goBack (); il retourne quelque chose

BackHandler.removeEventListener('hardwareBackPress', () => {});


0 commentaires

1
votes

1. Importez

handleHardwareBack = () => {
    this.props.navigation.goBack(null)
    console.log(" ********** This is called ************ ");
    return true;
}

2. constructeur

componentDidMount() {
    DeviceEventEmitter.removeAllListeners('hardwareBackPress')
    DeviceEventEmitter.addListener('hardwareBackPress', () => {
        let invokeDefault = true
        const subscriptions = []

        this.backPressSubscriptions.forEach(sub => subscriptions.push(sub))

        for (let i = 0; i < subscriptions.reverse().length; i += 1) {
            if (subscriptions[i]()) {
                invokeDefault = false
                break
            }
        }

        if (invokeDefault) {
            BackHandler.exitApp()
        }
    })

    this.backPressSubscriptions.add(this.handleHardwareBack)
}

componentWillUnmount() {
    DeviceEventEmitter.removeAllListeners('hardwareBackPress')
    this.backPressSubscriptions.clear()
}

3. Ajouter et supprimer des auditeurs

constructor(props) {
    super(props)
    this.backPressSubscriptions = new Set()
  }

4. Poignée arrière

import { BackHandler, DeviceEventEmitter } from 'react-native'


1 commentaires

Je ne pense pas que vous ayez besoin de faire cela si vous utilisez .push () dans toutes vos vues. J'ai une application qui utilise react-navigation et cela fonctionne comme vous le souhaitez sans faire cela. Vous avez dit que cela se produit dans tous les appareils, mais je pense que ce n'est que sur des appareils spécifiques.