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

  • 安装:

    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

.

react-navigation-easy-helper的更多相关文章

  1. react-native 学习 ----- React Navigation

    很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...

  2. react-native导航器 react navigation 介绍

    开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...

  3. React Navigation & React Native & React Native Navigation

    React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...

  4. [RN] 04 - React Navigation

    react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...

  5. React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方

    以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation  react-native ...

  6. React-native 导航插件React Navigation 4.x的使用

    React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...

  7. [RN] React Navigation 使用中遇到的显示 问题 汇总

    React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d

  8. react navigation goBack()返回到任意页面(不集成redux) 一

    方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...

  9. React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

  10. React Navigation基本用法

    /** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...

随机推荐

  1. 傻逼数学题(math)

    傻逼数学题 题目描述 由于乱码,复制不下来,只好截图了 输入格式 第一行一个正整数n 接下来n行每行两个整数x,y,表示第i个点的坐标 输出格式 一行一个数表示最小距离和,保留6位小数 样例输入 4 ...

  2. 华为上机测试题(表达式运算-java)

    PS:自己写的,自测试OK,供大家参考. 补充:数据解析的过程,评论区有更好的处理方式,可参考. /* * 输入一个表达式,3*8+7-2,没有括号 输出结果 */ /* 本程序暂不考虑容错处理 */ ...

  3. ObjectInputStream&ObjectOutputStream工具类

    序列化:将数据保存到文件:ObjectOutputStream; 反序列化:将文件中的数据显示出来:ObjectInputStream;   在反序列化程序中运行后能够正常输出Person的相关信息, ...

  4. UVA 1593: Alignment of Code(模拟 Grade D)

    题意: 格式化代码.每个单词对齐,至少隔开一个空格. 思路: 模拟.求出每个单词最大长度,然后按行输出. 代码: #include <cstdio> #include <cstdli ...

  5. TP5使用技巧

    1.fetchSql用于直接返回SQL而不是执行查询,适用于任何的CURD操作方法. 例如:$result = Db::table('think_user')->fetchSql(true)-& ...

  6. Vue v-for嵌套数据渲染问题

    Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...

  7. CF987C Three displays【一维DP/类似最大子序列和】

    [链接]:CF987C [分析]:先求出每个s[i]后面比s[i]大的c[i]的最小值,然后枚举前两个数c(i),c(j)以及 j 后面递增且存在最小值的dp(j) [代码]: #include< ...

  8. DAG动态规划-硬币问题

    题目:有n种硬币,面值分别为V1,V2,...Vn,每种都有无限多.给定非负整数S,可以选用多少个硬币,使得面值之和恰好为S?输出硬币数目的最小值和最大值! #include <bits/std ...

  9. 用SparkSQL构建用户画像

    用SparkSQL构建用户画像 二.  前言 大数据时代已经到来,企业迫切希望从已经积累的数据中分析出有价值的东西,而用户行为的分析尤为重要. 利用大数据来分析用户的行为与消费习惯,可以预测商品的发展 ...

  10. haproxy代理kibana、nginx代理kibana并实现登录验证

    在使用ELK进行日志统计的时候,由于Kibana自身并没有身份验证的功能,任何人只要知道链接地址就可以正常登录到Kibana控制界面,由于日常的查询,添加和删除日志都是在同一个web中进行,这样就有极 ...