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