react-navigation-easy-helper
本组件旨在不更改源码情况下,简单配置即可实现一些复杂的功能。如在任意位置进行跳转、根据路由名字返回指定页面、简化参数的获取、快速点击的拦截、统一页面跳转的拦截等。
安装:
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的更多相关文章
- react-native 学习 ----- React Navigation
很久没有的登陆博客园了,密码都是找回的,从当年的大学生已经正常的走上了程序员的道路,看到之前发的博客还是写的android,现在自己已经在使用了react-native了. 大学毕业了,做了java后 ...
- react-native导航器 react navigation 介绍
开发环境搭建好之后,想要进一步了解react-native,可以先从react-native官网上的电影列表案例入手: https://reactnative.cn/docs/0.51/sample- ...
- React Navigation & React Native & React Native Navigation
React Navigation & React Native & React Native Navigation React Navigation https://facebook. ...
- [RN] 04 - React Navigation
react-navigation和react-router的对比: 支持的平台: react-navigation: react-native react-router: react-native.r ...
- React Native常用组件之TabBarIOS、TabBarIOS.Item组件、Navigator组件、NavigatorIOS组件、React Navigation第三方
以下内容为老版本React Native,faceBook已经有了新的导航组件,请移步其他博客参考>>[我是传送门] 参考资料:React Navigation react-native ...
- React-native 导航插件React Navigation 4.x的使用
React-native 导航插件React Navigation 4.x的使用 文档 英文水平可以的话,建议直接阅读英文文档 简单使用介绍 安装插件 yarn add react-navigatio ...
- [RN] React Navigation 使用中遇到的显示 问题 汇总
React Navigation 使用中遇到的显示 问题 汇总 https://www.jianshu.com/p/8b1f18affc5d
- react navigation goBack()返回到任意页面(不集成redux) 一
方案一: 一.适用场景:在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A——>B——>C——>D 要想从D页面直接返 ...
- React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
- React Navigation基本用法
/** * Created by apple on 2018/9/23. */ import React, { Component } from 'react'; import {AppRegistr ...
随机推荐
- 10个简化Web开发者工作的HTML5开发工具
HTML5的到来,改变了设计和开发的工作,完全改变了以前的开发方式. HTML5进行本身就是一个很简单,很快捷的开发技术并且带给开发人员很多不同的工具和功能,使他们的工作变得更加Cool.它的功能非常 ...
- UVA 10330 Power Transmission
题意:懒得打了.LUCKY CAT 里有 http://163.32.78.26/homework/q10330.htm 第一个网络流题目.每个节点都有一个容量值.需要拆点.拆成i - > i ...
- input 输入框 光标错位问题 、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题
在IOS系统下的问题: 搜索出的建议如下: 你应该是用fixed定位做的弹出框,弹出框里面有文本框.fixed在ios上兼容不友好,会造成光标乱跳.建议用better-scroll,或者用absolu ...
- WPF+MVVM数据绑定问题集锦
1. 数据绑定的问题 在使用数据绑定时,一般使用 ObservableCollection<T> 类,不使用list列表集合,因为list数据发生变化时,UI界面不更新,而Observa ...
- 【数据库】E-R模型
E-R模型 实体:客观存在并可相互区别的事物称为实体.可以是具体的人.事.物或抽象的概念. 属性:实体所具有的某一特性称为属性.一个实体可以由若干个属性来刻画. 联系:现实世界中事物内部以及事物之间的 ...
- RobotFramework自动化1-环境搭建【转载】
本篇转自博客:上海-悠悠 原文地址:http://www.cnblogs.com/yoyoketang/tag/robotframework/ 前言 Robot Framework是一款python编 ...
- Netty源码学习(四)Netty服务器是如何启动的?
本文会分析Netty服务器的启动过程,采用的范例代码是Netty编写的Echo Server. 0. 声明acceptor与worker 由于Netty采用的reactor模型,所以需要声明两组线程, ...
- 牛客练习赛16 A 字典序最大的子序列【贪心】
链接:https://www.nowcoder.com/acm/contest/84/A 来源:牛客网 [出处]:http://codeforces.com/contest/196/problem/A ...
- Codeforces Round #448 (Div. 2) B. XK Segments【二分搜索/排序/查找合法的数在哪些不同区间的区间数目】
B. XK Segments time limit per test 1 second memory limit per test 256 megabytes input standard input ...
- 【模拟】Friday the Thirteenth
题目描述 Is Friday the 13th really an unusual event?That is, does the 13th of the month land on a Friday ...