react-navigation-easy-helper

最新推荐文章于 2022-03-17 18:30:16 发布

转载最新推荐文章于 2022-03-17 18:30:16 发布 · 155 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/crazycode2/p/9472498.html

文章标签：

#javascript #ViewUI

本组件旨在不更改源码情况下，简单配置即可实现一些复杂的功能。如在任意位置进行跳转、根据路由名字返回指定页面、简化参数的获取、快速点击的拦截、统一页面跳转的拦截等。

安装:

npm install react-navigation-easy-helper --save or yarn add react-navigation-easy-helper

使用:

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

转载于:https://www.cnblogs.com/crazycode2/p/9472498.html