La manipulation de bouton de retour de Réagir Natif, Navigateur sur Android

En plus de la réponse ci-dessus, le code de gestion devrait être quelque chose comme ceci

var navigator; 

React.BackAndroid.addEventListener('hardwareBackPress', () => {
    if (navigator && navigator.getCurrentRoutes().length > 1) {
        navigator.pop();
        return true;
    }
    return false;
});

en rendre code:

<Navigator ref={(nav) => { navigator = nav; }} />

N'oubliez pas de lier [ce]

La bonne réponse devrait être:

export default class MyPage extends Component {
  constructor(props) {
    super(props)
    this.navigator = null;

    this.handleBack = (() => {
      if (this.navigator && this.navigator.getCurrentRoutes().length > 1){
        this.navigator.pop();
        return true; //avoid closing the app
      }

      return false; //close the app
    }).bind(this) //don't forget bind this, you will remember anyway.
  }

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

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

  render() {
    return (
      <Navigator
        ref={navigator => {this.navigator = navigator}}
  ...

J'ai créé un dépôt GitHub qui vous fournira un exemple de projet de savoir comment gérer l'Android Bouton de Retour.

Vous pouvez cloner /télécharger le github:

Android Bouton De Retour Exemple De Projet

Mais voici quelques exemples de codes sur comment je gère le android bouton de retour

Le code suivant est pour mon écran initial lorsque l'utilisateur démarre mon application. Appuyez sur le bouton retour bouton ici serait d'afficher un message d'alerte qui va demander à l'utilisateur si l'utilisateur souhaite quitter l'app.

import React, {Component} from 'react';
import {View,Text,Button,BackHandler,Alert} from 'react-native';
import {NavigationActions} from 'react-navigation';
export default class InitScreen extends Component {
_focusDoneSubscribe;//declaring variable that will be listener for the back button when in focus 
_blurGoingSubscribe;//declaring variable that will be listener for the back button when blur 
//the following will remove the navigation bar at the top
static navigationOptions = {
header: null,
title: 'Welcome',
};
constructor(props)
{
super(props);
this._focusDoneSubscribe = props.navigation.addListener('didFocus', payload =>
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);//this assigns the listener
}
//functions to handle back button events
componentDidMount()
{
this._blurGoingSubscribe = this.props.navigation.addListener('willBlur', payload =>
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);
}
onBackButtonPressAndroid = () => {
Alert.alert(
'Exiting App',
'Confirm quitting the app?',
[
{text: 'CANCEL', style: 'cancel'},
{text: 'STOP ASKING AND QUIT', onPress: () => BackHandler.exitApp()}
],
{cancelable: false},
);
return true;
};
componentWillUnmount()
{
this._focusDoneSubscribe && this._focusDoneSubscribe.remove();
this._blurGoingSubscribe && this._blurGoingSubscribe.remove();
}
//actual render
render(){
const { navigate } = this.props.navigation;
return (
<View style={{alignItems: 'center'}}>
<View style={{height: 100,justifyContent: 'center',alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Navigation BackHandler Tutorial</Text>
<Text style={{fontSize: 20}}>Initial Screen</Text>
</View>
<View style={{flexDirection: 'column', justifyContent: 'space-between', height: 100}}>
<Button
title="SCREEN ONE"
onPress={() => {this.props.navigation.push('One')}}
/>
<Button
title="SCREEN TWO"
onPress={() => {this.props.navigation.push('Two')}}
/>
</View>
</View>
);
}
}

Le code suivant est un écran lorsque l'utilisateur appuie sur le bouton retour, il revenir à l'écran précédent:

import React, {Component} from 'react';
import {View,Text,Button,BackHandler} from 'react-native';//declaring variable that will be listener for the back button when in focus 
import {NavigationActions} from 'react-navigation';//declaring variable that will be listener for the back button when blur 
export default class ScreenOne extends Component {
_focusDoneSubscribe;
_blurGoingSubscribe;
//the following will remove the navigation bar at the top
static navigationOptions = {
header: null,
title: 'ONE',
};
constructor(props)
{
super(props);
this._focusDoneSubscribe = props.navigation.addListener('didFocus', payload =>
BackHandler.addEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);//this assigns the listener
}
//functions to handle back button events
componentDidMount()
{
this._blurGoingSubscribe = this.props.navigation.addListener('willBlur', payload =>
BackHandler.removeEventListener('hardwareBackPress', this.onBackButtonPressAndroid)
);
}
onBackButtonPressAndroid = () => {
this.props.navigation.goBack();
return true;
};
componentWillUnmount()
{
this._focusDoneSubscribe && this._focusDoneSubscribe.remove();
this._blurGoingSubscribe && this._blurGoingSubscribe.remove();
}
//actual render
render(){
const { navigate } = this.props.navigation;
return (
<View style={{alignItems: 'center'}}>
<View style={{height: 100,justifyContent: 'center',alignItems: 'center'}}>
<Text style={{fontSize: 20}}>Navigation BackHandler Tutorial</Text>
<Text style={{fontSize: 20}}>SCREEN ONE</Text>
</View>
</View>
);
}
}