React native's Android physical return key

Basic usage

Depending on the documentation, the Android back key is handled primarily by an event listener:

1  This . onbackpressed); 2 this. onbackpressed);

In Starter-kit, we implemented the ability to press the back key to rewind the navigation stack at the app level:

1 class App extends React.component {2 Componentwillmount () {3     if(Platform.os = = = ' Android ') {4Backandroid.addeventlistener (' hardwarebackpress ', This. onbackandroid);5     }6   }7 Componentwillunmount () {8     if(Platform.os = = = ' Android ') {9Backandroid.removeeventlistener (' hardwarebackpress ', This. onbackandroid);Ten     } One   } AOnbackandroid = () = { -Const NAV = This. Navigator; -Const ROUTERS =nav.getcurrentroutes (); the     if(Routers.length > 1) { - Nav.pop (); -       return true; -     } +     return false; -   }; + ... A}

Note that in order to facilitate subsequent removeeventlistener, a callback function is created using the method of binding the function property of this, not the arrow function or bind (this), referring to the previous blog post

In the code, the event is hooked up when Componentwillmount. For the application root component, this life cycle is basically the same as the life cycle of our application. When the back key is pressed, first check the current navigation stack, if the extra page, then return to the top of the page.

Description: Backandroid is an empty implementation under the iOS platform, so theoretically not doing this platform.os = = = ' Android ' is also safe to judge.

Use default behavior/Exit app

The default behavior of the back key is to exit the app. We usually need to judge certain conditions and finally decide whether or not to exit the app. The example above uses the first method of invoking the default behavior:

If none of the event listener functions returns TRUE, the default behavior is called by default

If you only hook up a listener function, then your return value determines whether you want to invoke the default behavior: True is not called , false is called .

In the preceding code, if we have more than one page in the navigation stack, we do not call the default behavior, and if there is only one page, the default interface is called.

Example: "Press again to exit the app"

This is often required: After pressing the back key, a toast is popped up and then pressed again within a certain amount of time before exiting the app. This code can be written like this:

  Onbackandroid = () = {    if (this. lastbackpressed + >=  Date.now ()) {      /// The back key has been pressed in the last 2 seconds to exit the app.       returnfalse;    }     this. lastbackpressed = date.now ();    Toastandroid.show (' Press again to exit the application ')    ; return true ;  };

In another case, we cannot decide whether to invoke the default behavior in a listener function, or to wait for an asynchronous operation to invoke the default behavior, at which point the second method can be used:

Use BACKANDROID.EXITAPP()To exit the app. Example: saving data before exiting an app

Notation 1:

  Onbackandroid = () ={    saveData (). Then (()={      backandroid.exitapp ();    });     return true ;  }

In the listener function, we start the asynchronous event and return directly to true. The default behavior is not invoked at this time. When the save is complete, we call Exitapp (), triggering the default behavior and exiting the app.

Notation 2:

  onbackandroid = Async () ={    await saveData ();    Backandroid.exitapp ();  }

Here we use the Async function, and the Async function always returns a promise,promise as an object and is also considered a "truth", so the default behavior is always not called in this case. When the save is complete, we call Exitapp (), triggering the default behavior and exiting the app.

Decide what to do based on the current interface

Sometimes we have this demand: when the user is in some interface, the back key to do a special action, such as: Prompt the user whether to save data, or unlock the interface prohibit back key return and so on. At this point, the best practice is to save information on how to handle the back key on the corresponding component in the route or route:

Onbackandroid = () ={Const NAV= This. Navigator; Const Routers=nav.getcurrentroutes (); if(Routers.length > 1) {Const top= Routers[routers.length-1]; if(Top.ignoreback | |top.component.ignoreBack) {        //This interface is determined on the route or component to ignore the back key        return true; } Const Handleback= Top.handleback | |Top.component.handleBack; if(handleback) {//a route or component determines that the interface handles the back key on its own        returnHandleback (); }      //default behavior: Exits the current interface. Nav.pop (); return true; }    return false; };

Original reproduced from:React native Chinese community

React native's Android physical return key