web-dev-qa-db-fra.com

React-native Android bouton retour dans react-navigation

Eh bien, j'ai un react-native application avec plusieurs écrans, chaque écran ayant une barre supérieure où se trouve un bouton de retour, son comportement principal est que l'application retourne à l'écran principal lorsque ce bouton est enfoncé. Ce que je veux faire, c'est copier ce comportement sur le bouton de retour du matériel (maintenant en appuyant sur le bouton de retour du matériel, l'application se ferme), comment faire?

MISE À JOUR:

J'utilise react-navigation et redux

androidreact-nativereduxreact-navigation
6
Eugen-Andrei Coliban

Vous pouvez:

  1. importer le BackHandler de "react-native"
  2. Ajoutez le composantWillMount BackHandler.addEventListener('hardwareBackPress', this.handleBackButton);
  3. Implémentez handleBackButton comme ceci handleBackButton(){ this.props.navigation.popToTop(); return true; }

popToTop retourne au premier écran de la pile.

Si vous utilisez react-navigation avec Redux, vous devez implémenter le popToTop comme une action à distribuer.

7
Paolo Dell'Aguzzo

Donc, si vous utilisez react-navigation et redux, vous pouvez jeter un œil à docs - Gestion du bouton de retour du matériel dans Android

YourComponent.js: 

import React from "react";
import { BackHandler } from "react-native";
import { NavigationActions } from "react-navigation";

/* your other setup code here! this is not a runnable snippet */

class ReduxNavigation extends React.Component {
  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch, nav } = this.props;
    if (nav.index === 0) {
      return false;
    }

    dispatch(NavigationActions.back());
    return true;
  };

  render() {
    /* more setup code here! this is not a runnable snippet */ 
    return <AppNavigator navigation={navigation} />;
  }
}
1
MohamadKh75

Vous pouvez le faire par l'exemple ci-dessous

import { BackHandler } from 'react-native';

class App extends Component {
  constructor(props){
    super(props);
    this.backButtonClick = this.backButtonClick.bind(this);
  }

  componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.backButtonClick);
  }

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

  backButtonClick(){
    if(this.props.navigation && this.props.navigation.goBack){
      this.props.navigation.goBack(null);
      return true;
    }
    return false;
  }
}
1
Javascript Hupp Technologies

Importez ce package

import { BackHandler } from "react-native";

Lier la fonction dans le constructeur

this.exitApp = this.exitApp.bind(this);

Votre bouton de retour

<Button transparent onPress={this.exitApp}>
    <Icon name="arrow-back" />
</Button>

Appuyez sur la touche arrière et fermez l'application

exitApp() {
    BackHandler.exitApp()
}

// Add the listener when the page is ready
componentDidMount() {
    BackHandler.addEventListener('hardwareBackPress', this.exitApp);
}

// Remove the listener before removing
componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.exitApp);
}

La façon d'afficher le bouton peut être différente, mais cela fonctionnera! En cas de problème, écrivez dans les commentaires.

0
Rajendran Nadar