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 ...
随机推荐
- MFC does not support WINVER less than 0x0501 解决方案(转)
原文转自 http://blog.csdn.net/ygzhong000/article/details/41750841 解决方案:在stdafx.h头文件中添加以下行. #define WINVE ...
- [译] 如何像 Python 高手一样编程?
转自:http://www.liuhaihua.cn/archives/23475.html Harries 发布于 7天前 分类:编程技术 阅读(15) 评论(0) 最近在网上看到一篇介绍Pytho ...
- greasemonkey
Greasemonkey Hacks/Getting Started < Greasemonkey Hacks Greasemonkey Hacks Foreword Credits Prefa ...
- UVA 10912 Simple Minded Hashing
题意就略了.刚一看被数据吓住了.看到字符要求严格递增.那么如果字串长大于26那必然方案数目为0:同时1+2+3....+24+25+26=351如果大于这个数也是不可能的 令dp[i][j][k]表示 ...
- kvm虚拟机最佳实践系列1-kvm宿主机准备
KVM宿主机配置 系统环境:ubuntu16, bond0 业务网口 bond1 管理网口+存储网口 安装KVM环境支持 sudo apt-get install qemu-kvm sudo apt- ...
- django视图重定向
# 原创,转载请留言联系 当请求访问到某个视图时,我们想让它重定向到其他页面,应该怎么做呢? 1.HttpResponseRedirect 需求:当我们访问127.0.0.1/my_redirect时 ...
- 【原创】SSAS-引用维度与多数据源、多数据源视图引发分区错误
背景: 最近有个项目,有32家分公司,集团总部需要取这个32家分公司数据做分析,由于每个分公司的数据都比较庞大,所以最终方案是每个分公司一个DW,在cube搭建过程中将每个公司数据作为一个分区数据的来 ...
- IIS——MIME介绍与添加MIME类型
MIME(MultipurposeInternet Mail Extensions)多用途互联网邮件扩展类型.是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会 ...
- js-限制参与活动的范围(微信H5活动)
近期接到大连某个项目,一个H5的活动,其中有一个需求就是:这个活动的参与者仅限大连地区的用户 所以参考了微信API 得出的操作结果为: wx.ready(function() { wx.getLoca ...
- J.U.C并发框架源码阅读(一)AtomicInteger
基于版本jdk1.7.0_80 java.util.concurrent.atomic.AtomicInteger 代码如下 /* * ORACLE PROPRIETARY/CONFIDENTIAL. ...