Prévenir le bouton de retour matériel android pour React Native

Je veux éviter à l'utilisateur de revenir à l'écran précédent. Donc, j'ai ajouté le code, mais cela ne fonctionne pas. Existe-il des solutions? L'alerte pop-up est vu, mais "return false" ne fonctionne pas.

componentDidMount() {
   BackAndroid.addEventListener('hardwareBackPress', () => {
     Alert.alert("alert","alert")

      this.props.navigator.pop();

       return false;
   });

source d'informationauteur Neethi Ratawa

  1. 31

    Vous devez return truesi vous souhaitez désactiver le comportement par défaut du bouton retour.

    Voici un exemple de composant qui permet de bloquer l'utilisateur de retourner à l'écran précédent.

    import React, {Component,} from 'react';
import {
    View,
    Text,
    BackHandler,
    ToastAndroid,
} from 'react-native';

class BackButtonDemo extends Component {
    componentDidMount() {
        BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
    }

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

    handleBackButton() {
        ToastAndroid.show('Back button is pressed', ToastAndroid.SHORT);
        return true;
    }

    render() {
        return (
            <View>
                <Text>Back button example</Text>
            </View>
        );
    }
}

module.exports = BackButtonDemo;

    Note:
    Retirez également " cela.accessoires de jeu.navigator.pop (); " de votre solution. Navigateur pop fonction de l'utilisateur à l'écran précédent rendu par le Navigateur.

  2. 9

    - Je désactiver mon bouton de retour (android) pour l'ensemble de l'application par ajouter ce code dans App.js

    componentDidMount() {
  BackAndroid.addEventListener('hardwareBackPress', this.handleBackButton);
}

componentWillUnmount() {
  BackAndroid.removeEventListener('hardwareBackPress', this.handleBackButton);
}

handleBackButton() {
  return true;
}

    n'oubliez pas d'importer BackAndroid

    import {BackAndroid} from 'react-native'
  3. 3

    Si vous utilisez réagir-natigation que le besoin d'utiliser BackHandler au lieu de BackAndroid

    import { BackHandler } from 'react-native';

//code

componentDidMount() {
  BackHandler.addEventListener('backPress');
}

//some more code

componentWillUnmount() {
  BackHandler.removeEventListener('backPress');
}
  4. 3

    Essayer cette Désactiver le bouton de retour en juste retour des vrai

    import {BackAndroid} from 'react-native';

componentWillMount() {
   BackAndroid.addEventListener('hardwareBackPress', () => {return true});
}
  5. 1

    Onclick du bouton de retour OnBackPressed de rappel est appelée

    vous pouvez simplement supprimer super déclaration onBackPressed de retour d'appel.

     @Override
    public void onBackPressed() {

    }
  6. 1

    Juste pour vous donner une réponse complète lors de l'utilisation de réagir la navigation:

    Si vous êtes à l'aide de réagir de la navigation, placez les éléments suivants dans votre RootNavigation classe pas l'App.js afin de désactiver l'arrière-bouton pour l'ensemble de l'application.

    import { BackHandler } from 'react-native';

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

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

onBackButtonPressed() {
    return true;
}