项目作者: vonovak

项目描述 :
Easily handle Android back button behavior with React-Navigation.
高级语言: JavaScript
项目地址: git://github.com/vonovak/react-navigation-backhandler.git
创建时间: 2018-03-16T18:48:22Z
项目社区:https://github.com/vonovak/react-navigation-backhandler

开源协议:MIT License

下载


react-navigation-backhandler

Easily handle Android back button behavior with React-Navigation.

NOTE use version 1 of this package for react-navigation version 4 and lower

use version 2 of this package for react-navigation version 5 and later

Installation

Install with npm:

  1. $ npm install react-navigation-backhandler

Install with yarn:

  1. $ yarn add react-navigation-backhandler

Usage

The following snippet demonstrates the usage. Note that onBackButtonPressAndroid will only be called if SomeComponent is placed in a screen that is focused (the one user is directly interacting with).

Behind the scenes, the onBackButtonPressAndroid handler is registered before a screen is focused, and unregistered before going away from it, leaving you with a declarative interface to interact with. Internally, this package uses apis that are provided by react-navigation.

You may use useAndroidBackHandler or AndroidBackHandler component anywhere in your app’s React tree, it does not need to be placed directly in the screen component.

There are two ways of using this library:

  1. As hook
  2. As component

Use as hook

  1. import { useAndroidBackHandler } from "react-navigation-backhandler";
  2. const SomeComponent = () => {
  3. const onBackPress = useCallback(() => {
  4. /*
  5. * Returning `true` denotes that we have handled the event,
  6. * and react-navigation's lister will not get called, thus not popping the screen.
  7. *
  8. * Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
  9. * */
  10. if (youWantToHandleTheBackButtonPress) {
  11. // do something
  12. return true
  13. }
  14. return false
  15. }, [])
  16. useAndroidBackHandler(onBackPress)
  17. return <BodyOfYourScreen ></BodyOfYourScreen>
  18. }

Use as component

Note: You can also use the component “inline” without children: <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid} ></AndroidBackHandler>

  1. import { AndroidBackHandler } from "react-navigation-backhandler";
  2. class SomeComponent extends React.Component {
  3. onBackButtonPressAndroid = () => {
  4. /*
  5. * Returning `true` from `onBackButtonPressAndroid` denotes that we have handled the event,
  6. * and react-navigation's lister will not get called, thus not popping the screen.
  7. *
  8. * Returning `false` will cause the event to bubble up and react-navigation's listener will pop the screen.
  9. * */
  10. if (youWantToHandleTheBackButtonPress) {
  11. // do something
  12. return true;
  13. }
  14. return false;
  15. };
  16. render() {
  17. return (
  18. <AndroidBackHandler onBackPress={this.onBackButtonPressAndroid}>
  19. <BodyOfYourScreen ></BodyOfYourScreen>
  20. </AndroidBackHandler>
  21. );
  22. }
  23. }

Warning

The package was only tested to be used in screens in stack navigator, other use cases may not work.