web-dev-qa-db-fra.com

Bouton Précédent pour empêcher le matériel Android pour React Natif

Je veux empêcher l'utilisateur de revenir à l'écran précédent. J'ai donc ajouté du code, mais cela ne fonctionne pas. Y a-t-il des solutions pour cela? L'alerte pop-up est visible mais "return false" ne fonctionne pas.

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

      this.props.navigator.pop();

       return false;
   });
androidreact-native
27
Neethi Ratawa

Vous devez return true, si vous souhaitez désactiver le comportement du bouton Précédent par défaut.

Voici un exemple de composant qui empêchera l'utilisateur de revenir à 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:

Supprimez également this.props.navigator.pop(); de votre solution.

Navigator La fonction pop amène l'utilisateur à l'écran précédent rendu par Navigator.

74
Jickson

Je désactive mon bouton de retour (Android) pour toute l'application en ajoutant 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'
11
Syn Adhitya

Essayez ce bouton retour Désactiver en retournant simplement true

import {BackAndroid} from 'react-native';

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

Si vous utilisez react-natigation alors vous devez utiliser BackHandler au lieu de BackAndroid

import { BackHandler } from 'react-native';

// code

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

// some more code

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

Juste pour vous donner une réponse complète lorsque vous utilisez react-navigation:

Si vous utilisez react-navigation, placez le texte suivant dans votre classe RootNavigation et non dans le fichier App.js afin de désactiver le bouton Précédent pour toute l'application.

import { BackHandler } from 'react-native';

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

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

onBackButtonPressed() {
    return true;
}
4
elü

Un clic sur le bouton de retour du matériel Le rappel OnBackPressed est appelé

vous pouvez simplement supprimer la super-déclaration dans le rappel onBackPressed.

 @Override
    public void onBackPressed() {

    }
1
WritingForAnroid