Gestione del pulsante Indietro in React Native, Navigator su Android

Question

Ho un Navigator in un'applicazione Android che reagisce con un'applicazione nativa.

Sto utilizzando navigator.push() per passare a una pagina diversa. Sembrerebbe naturale che il pulsante Indietro faccia scattare il navigatore e tornare indietro di una pagina, ma non è quello che sta succedendo (esce dall'app).

Il reagente nativo Navigator non dispone di supporto per il pulsante di ritorno, è necessario collegarlo da solo a BackAndroid?

Answer 1

Sì, è necessario gestire il pulsante indietro da soli. Penso che la ragione principale per questo è che potresti voler fare cose diverse con il pulsante indietro invece di tornare indietro nello stack. Non so se ci sono piani per incorporare la funzionalità del pulsante Indietro in futuro.

Answer 2

Oltre alla risposta di cui sopra, il codice di gestione dovrebbe essere qualcosa di simile

var navigator; 

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

a rendere il codice:

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

Answer 3

Non so quando l'API è cambiato, ma come di reagire nativa 0.31 (potenzialmente in precedenza versioni pure) BackAndroid è un componente che deve essere importato da nativa del react:

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

anche essere sicuri di rimuovere l'ascoltatore in componentWillUnmount:

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

* UPDATE: In reagire nativa 0.44 questo modulo è stato rinominato BackHandler. Navigator è stato anche ufficialmente deprecato, ma possono ancora essere trovati qui: https://github.com/facebookarchive/react-native-custom-components

import { BackHandler } from 'react-native'; 

Answer 4

Per pulire il codice utilizzando le mie conoscenze e le risposte precedenti, ecco come dovrebbe apparire come:

import { ..., Navigator, BackAndroid } from 'react-native'; 

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

componentWillUnmount() { 
    //Forgetting to remove the listener will cause pop executes multiple times 
    BackAndroid.removeEventListener('hardwareBackPress', this.handleBack); 
} 

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

    return false; //close the app 
} 

Answer 5

Don 't dimenticare bind [questo]

La risposta corretta dovrebbe essere:

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}} 
    ...