# react-navigation-easy-helper

> 由于Navigator被官方移除，官方推荐的路由是react-navigation。但使用起来还是有些复杂。本组件旨在不更改源码情况下，简单配置即可实现一些复杂的功能。如在任意位置进行跳转、根据路由名字返回指定页面、简化参数的获取、快速点击的拦截、统一页面跳转的拦截等。

Latest version **1.2.2** (published 2019-12-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-navigation-easy-helper
pnpm add react-navigation-easy-helper
yarn add react-navigation-easy-helper
bun add react-navigation-easy-helper
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.2 |
| Published | 2019-12-09 |
| First published | 2018-03-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 27 |
| Maintainers | puti94 |

## Links

- npm: https://www.npmjs.com/package/react-navigation-easy-helper
- Repository: https://github.com/puti94/react-navigation-easy-helper
- Homepage: https://github.com/puti94/react-navigation-easy-helper#readme
- Issues: https://github.com/puti94/react-navigation-easy-helper/issues
- npm.io page: https://npm.io/package/react-navigation-easy-helper

## Recent versions

- 1.2.2 (latest) — 2019-12-09
- 1.2.1 — 2018-12-05
- 1.2.0 — 2018-04-27
- 1.1.0 — 2018-04-13
- 1.0.0 — 2018-03-07

## README

# react-navigation-easy-helper

由于Navigator被官方移除，官方推荐的路由是react-navigation。但使用起来还是有些复杂。本组件旨在不更改源码情况下，简单配置即可实现一些复杂的功能。如在任意位置进行跳转、根据路由名字返回指定页面、简化参数的获取、快速点击的拦截、统一页面跳转的拦截等。

- 安装:`npm install react-navigation-easy-helper --save` or `yarn add react-navigation-easy-helper`
- 使用: 

  ```jsx
    import {configRoute,addToRouteStack,configRoute} from 'react-navigation-easy-helper'
  
    //首先需要在之前的导航配置文件中用configRoute包裹参数
      export const AppNavigator = StackNavigator(
      configRoute({
        LaunchPage: {screen: LaunchPage},
        Test2Page: {screen: Test2Page},
        Test3Page: {screen: Test3Page},
        Test4Page: {screen: Test4Page},
        LoginPage: {screen: LoginPage},
    }), {
        initialRouteName: 'LaunchPage'
    }
   );
  
    //在任意地方就可以这样使用
    RouteHelper.navigate('Test2Page', {params: '我是参数'})
    //返回指定页面
    RouteHelper.goBackTo('Test2Page')
  
    //在注册的页面可以添加回调
     componentDidFocus(){
        console.log('componentDidFocus',arguments)
     }
  
     componentWillBlur(){
        console.log('componentWillBlur',arguments)
     }
  
       //跳转拦截器用法
        let needLoginPage = ['Test3Page'];
                let noLogin = true;
                RouteHelper.routeInterceptor = (routeName, params) => {
                    if (noLogin && needLoginPage.indexOf(routeName) !== -1) {
                        // RouteHelper.navigate('LoginPage', {
                        //     routeName,
                        //     params
                        // });
                        RouteHelper.push('LoginPage', {
                            successCallBack: () => {
                                noLogin = false;
                                RouteHelper.push(routeName, params)
                            }
                        });
                        return false;
                    }
                    return true
                };
                RouteHelper.navigate('Test3Page', {params: '我是参数'})
  
                //其它具体用法见example
  ```
- 注意点:本组件只是简化一些react-navigation的用法，方法可能不是很完善，如遇到问题，欢迎提issues,如果觉得不错，欢迎star。

---
_Source: https://npm.io/package/react-navigation-easy-helper · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._