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.
5 Réponses :
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 };
Oui, je fais également la même chose avec le code react-navigation. mais ne fonctionne pas aussi.
Essayez d'utiliser return false
au lieu de return true
.
Cela fonctionne à certaines occasions si vous avez bien géré l'événement
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
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.
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', () => {});
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'
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.
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. +