React Native Android Backer
中文文档
What
React Native Android Backer
is a solution for React Native Android back button. It combines the react-navigation API to provide powerful functionality. The features as follow:
- Double click back button to exit app
- Make back button disabled
- Click back button to navigate page
- Click back button to close modal
Install
npm install react-native-android-backer// or yarn add react-native-android-backer
Dependency Library
Please make sure project have installed libraries as follow:
- react: >= 16.x
- react-native: >= 0.57.x
- react-navigation: >= 3.x
Get Started
- First step is to use
withBacker
function to encapsulation thereact-navigation
的AppNavigator
component:
;; const AppNavigatorWithBacker = ;
withBacker(component, options)
: this API is a HOC, it receive 2 params:
- component: type is React component, the wrap component
- options: type is object, use to config the back button behaviors,the attributes as follow:
- exitToast: type is function, the toast function for exit app
- isExitScreen: type is function, check the current screen whether should exit app
AppNavigatior
is the initialize file of use expo
to create React Native
project,the source file is here。
- Second step is to replace
AppNavigator
toAppNavigatorWithBacker
.
- <AppNavigator />+ <AppNavigatorWithBacker />
API
React Native Android Backer
use the react-navigation
params to do different things according to the back button behaviors. The params as follow:
- disableBack:type is boolean, set
true
to disable back button event. - backPage && backPageParams: backPage's type is string,backPageParams's type is object, which were make back button to navigate to
backPage
withbackPageParams
. - isModalShow && closeModal:isModalShow's type is function, closeModal's type is function, which were make back button to close modal.
Example:
; { ... // define the react-navigation params in the constructor propsnavigation; } ...
Extra API
React Native Android Backer
also provide the extra API which is easy to use the features of react-navigation
but no need the navigation
object:
- navigate(page: string): navigate to some page
- goBack(): go back to latest page
- getCurrentRoute(): get the current page object
Example:
;; ... { navigationServer; } { navigationServer; } { const currentPage = navigationServer; // currentPage: { // "key": "id-1552444588477-2", // "params": { // "disableBack": true, // }, // "routeName": "Settings", // } } ...