首页 web前端 js教程 在react-navigation中如何判断用户是否登录跳转到登录页

在react-navigation中如何判断用户是否登录跳转到登录页

Jun 23, 2018 pm 02:24 PM
react 登录

本篇文章主要介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文介绍了react-navigation 如何判断用户是否登录跳转到登录页的方法,分享给大家,也给自己留个笔记,具体如下:

新建一个index.js

import React, {Component} from 'react'; 
import {AppRegistry, Text, View, Button,Image,StyleSheet,BackHandler,ToastAndroid} from 'react-native'; 
import { StackNavigator,TabNavigator,NavigationActions } from 'react-navigation'; 
 
 
 
//全局存储 
import stroage from './StorageUtil'; 
import './Global' 
 
import IndexScreen from './Index' 
import MeScreen from './Me' 
import Login from './Login' 
 
 
//底部菜单栏设置 
const MainScreenNavigator = TabNavigator({ 
    IndexScreen: { 
      screen: IndexScreen, 
      navigationOptions: { 
        tabBarLabel: '首页', 
        headerLeft:null,//去除返回按钮 
        tabBarIcon: ({ tintColor }) => ( 
          <Image 
            source={require(&#39;./img/ic_image.png&#39;)} 
            style={[styles.icon, {tintColor: tintColor}]} 
          /> 
        ), 
        onNavigationStateChange:(()=> alert("首页")) 
        // initialRouteName:&#39;IndexScreen&#39; 
      }, 
    }, 
     
    MeScreen: { 
      screen: MeScreen, 
      navigationOptions: { 
        tabBarLabel:&#39;我的&#39;, 
        tabBarIcon: ({ tintColor }) => ( 
          <Image 
            source={require(&#39;./img/ic_me.png&#39;)} 
            style={[styles.icon, {tintColor: tintColor}]} 
          /> 
        ), 
        // initialRouteName:&#39;MeScreen&#39; 
      } 
    } 
  }, 
  { 
    // trueinitialRouteName:&#39;MeScreen&#39;,//设置默认的页面组件 
    // initialRouteName:&#39;MeScreen&#39;, 
    lazy:true,//是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true 
    // order: [&#39;IndexScreen&#39;,&#39;FindScreen&#39;,&#39;ListNewScreen&#39;,&#39;MeScreen&#39;], //order 来定义tab显示的顺序,数组形式 
    animationEnabled: false, // 切换页面时是否有动画效果 
    tabBarPosition: &#39;bottom&#39;, // 显示在底端,android 默认是显示在页面顶端的 
    swipeEnabled: false, // 是否可以左右滑动切换tab 
    // backBehavior: &#39;none&#39;, // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转 
    tabBarOptions: { 
      activeTintColor: &#39;#2196f3&#39;, // 文字和图片选中颜色 
      inactiveTintColor: &#39;#999&#39;, // 文字和图片未选中颜色 
      showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示 
      indicatorStyle: { 
        height: 0 // 如TabBar下面显示有一条线,可以设高度为0后隐藏 
      }, 
      style: { 
        backgroundColor: &#39;#fff&#39;, // TabBar 背景色 
        height: 60 
      }, 
      labelStyle: { 
        fontSize: 14, // 文字大小 
        marginTop:2 
        // lineHeight:44 
      }, 
    } 
  }); 
 
//跳转路由设置 
const FirstApp = StackNavigator({ 
  IndexScreen: { 
    screen: MainScreenNavigator, 
    // initialRouteName: &#39;IndexScreen&#39; 
  }, 
  MeScreen: {screen: MeScreen}, 
  Login:{screen: Login}, 
   
}, { 
  initialRouteName: &#39;IndexScreen&#39;, // 默认显示界面 
  navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置) 
    headerStyle:{elevation: 0,shadowOpacity: 0,height:48,backgroundColor:"#2196f3"}, 
    headerTitleStyle:{color:&#39;#fff&#39;,fontSize:16}, //alignSelf:&#39;center&#39; 文字居中 
    headerBackTitleStyle:{color:&#39;#fff&#39;,fontSize:12}, 
    // headerTintColor:{}, 
    gesturesEnabled:true,//是否支持滑动返回收拾,iOS默认支持,安卓默认关闭 
  }, 
  mode: &#39;card&#39;, // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果) 
  headerMode: &#39;screen&#39;, // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏 
  onTransitionStart: (Start)=>{console.log(&#39;导航栏切换开始&#39;);}, // 回调 
  onTransitionEnd: ()=>{ console.log(&#39;导航栏切换结束&#39;); } // 回调 
}); 
// 
const defaultGetStateForAction = FirstApp.router.getStateForAction; 
 
FirstApp.router.getStateForAction = (action, state) => { 
  //页面是MeScreen并且 global.user.loginState = false || &#39;&#39;(未登录) 
  if (action.routeName ===&#39;MeScreen&#39;&& !global.user.loginState) { 
    this.routes = [ 
      ...state.routes, 
      {key: &#39;id-&#39;+Date.now(), routeName: &#39;Login&#39;, params: { name: &#39;name1&#39;}}, 
    ]; 
    return { 
      ...state, 
      routes, 
      index: this.routes.length - 1, 
    }; 
  } 
  return defaultGetStateForAction(action, state); 
}; 
 
 
export default class FirstAppDemo extends Component { 
  render() { 
    return ( 
      <FirstApp /> 
    ); 
  } 
} 
 
AppRegistry.registerComponent(&#39;FirstApp&#39;, () => FirstAppDemo); 
 
 
const styles = StyleSheet.create({ 
  icon: { 
    width: 26, 
    height: 26, 
  }, 
});
登录后复制

新建一个全局存储StorageUtil.js

import React, {Component} from &#39;react&#39;; 
import {AsyncStorage} from &#39;react-native&#39;; 
import Storage from &#39;react-native-storage&#39;; 
 
var storage = new Storage({ 
  // 最大容量,默认值1000条数据循环存储 
  size: 1000, 
 
  // 存储引擎:对于RN使用AsyncStorage,对于web使用window.localStorage 
  // 如果不指定则数据只会保存在内存中,重启后即丢失 
  storageBackend: AsyncStorage, 
 
  // 数据过期时间,默认一整天(1000 * 3600 * 24 毫秒),设为null则永不过期 
  defaultExpires: 1000 * 3600 * 24, 
 
  // 读写时在内存中缓存数据。默认启用。 
  enableCache: true, 
 
  // 如果storage中没有相应数据,或数据已过期, 
  // 则会调用相应的sync方法,无缝返回最新数据。 
  // sync方法的具体说明会在后文提到 
  // 你可以在构造函数这里就写好sync的方法 
  // 或是写到另一个文件里,这里require引入 
  // 或是在任何时候,直接对storage.sync进行赋值修改 
  //sync: require(&#39;./sync&#39;) // 这个sync文件是要你自己写的 
}) 
 
// 最好在全局范围内创建一个(且只有一个)storage实例,方便直接调用 
 
// 对于web 
// window.storage = storage; 
 
// 对于react native 
// global.storage = storage; 
 
// 这样,在此**之后**的任意位置即可以直接调用storage 
// 注意:全局变量一定是先声明,后使用 
// 如果你在某处调用storage报错未定义 
// 请检查global.storage = storage语句是否确实已经执行过了 
 
//导出为全局变量 
global.storage = storage; 

新建一个全局变量组件Global.js,用户存储用户登录的信息
 
//用户登录数据 
global.user = { 
  loginState:&#39;&#39;,//登录状态 
  userData:&#39;&#39;,//用户数据 
}; 
//刷新的时候重新获得用户数据  
storage.load({ 
  key: &#39;loginState&#39;, 
}).then(ret => { 
  global.user.loginState = true; 
  global.user.userData = ret; 
}).catch(err => { 
  global.user.loginState = false; 
  global.user.userData = &#39;&#39;; 
})
登录后复制

登录组件 Login.js

_login() {//登录函数 
    // debugger; 
    ToastUtil.show("登录成功"); 
    // 使用key来保存数据。这些数据一般是全局独有的,常常需要调用的。 
    // 除非你手动移除,这些数据会被永久保存,而且默认不会过期。 
    storage.save({ 
      key: &#39;loginState&#39;, // 注意:请不要在key中使用_下划线符号! 
      data: { 
        userid: &#39;1001&#39;, 
        userName:&#39;userName&#39;, 
        token: &#39;token&#39; 
      }, 
 
      // 如果不指定过期时间,则会使用defaultExpires参数 
      // 如果设为null,则永不过期 
      // 8个小时后过期 
      expires: 1000 * 3600 * 8 
    }); 
    global.user.loginState = true;//设置登录状态 
    global.user.userData = { userid: &#39;1001&#39;, userName:&#39;userName&#39;, token: &#39;token&#39;};//保存用户数据 
 
    setTimeout(()=>{ 
      this.props.navigation.navigate(&#39;UserScreen&#39;)//跳转到用户页面 
    },2000) 
     
  }
登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

详细解读react-navigation的导航使用

在javascript中详细解读Function函数(详细教程)

使用AngularJS2与D3.js集成如何实现自定义可视化

在javascript中如何实现按顺序加载运行js方法

以上是在react-navigation中如何判断用户是否登录跳转到登录页的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前 By 尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

wallpaperengine登录别的号后下载别人的壁纸怎么办 wallpaperengine登录别的号后下载别人的壁纸怎么办 Mar 19, 2024 pm 02:00 PM

当你在自己电脑上登过别人steam账号之后,恰巧这个别人的账号也有wallpaper软件,切换回自己账号之后steam就会自动下载别人账号订阅的壁纸,用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号,在设置里面找到云同步,关闭steam云同步。2、登陆你之前登陆的别人的steam账号,打开wallpaper创意工坊,找到订阅内容,然后取消全部订阅。(以后防止找不到壁纸,可以先收藏再取消订阅)3、切换回自己的stea

小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? 小红书怎么登录以前的账号?它换绑后原来号丢失了怎么办? Mar 21, 2024 pm 09:41 PM

随着社交媒体的迅速发展,小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中,有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题,以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号?1.找回密码登录如果长时间未登录小红书,可能导致账号被系统回收。为了恢复访问权限,你可以尝试通过找回密码的方式重新登录账号。操作步骤如下:(1)打开小红书App或官网,点击“登录”按钮。(2)选择“找回密码”。(3)输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘 Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘,需要具体代码示例随着互联网的快速发展,网站建设变得越来越普遍,而Discuz作为一款常用的论坛建站系统,受到了许多站长的青睐。然而,正是因为其功能强大,有时候我们在使用Discuz的过程中会遇到一些问题,比如后台登录问题。今天,我们就来大揭秘Discuz后台登录问题的解决方法,并且提供具体的代码示例,希望能帮助到有需要

《阴阳师》茨木童子典藏皮肤登录即领,禅心云外镜新皮肤即将上线! 《阴阳师》茨木童子典藏皮肤登录即领,禅心云外镜新皮肤即将上线! Jan 05, 2024 am 10:42 AM

山野间万鬼嘶鸣,隐没兵刃交接之声,越岭奔赴而来的鬼将,心中战意汹涌,以炎火为号,率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃,鎏金眼眸迸发桀骜战意,白玉甲片装点战袍,彰显大妖不羁狂放的气势。雪白飘扬的袖摆上,赤焰攀附交织,金纹烙印其中,燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至,烈焰令群峦为之震动,炼狱间归来的妖鬼啊,一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店,

快手电脑版怎么登录-快手电脑版的登录方法 快手电脑版怎么登录-快手电脑版的登录方法 Mar 04, 2024 pm 03:30 PM

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法,有需要的小伙伴可以来了解了解哦。第一步:首先在电脑的浏览器上百度搜索快手官网。第二步:在搜索结果列表里面选取第一条。第三步:进入到快手官网主页面后,点击视频的选项。第四步:点击右上角的用户头像。第五步:在弹出的登录菜单里面点击二维码登录。第六步:之后打开手机上的快手,点击左上角的图标。第七步:点击二维码标志。第八步:在我的二维码界面点击右上角的扫描图标之后,扫描电脑上的二维码即可。第九步:最后电脑版的快手就登录成

如何利用React和RabbitMQ构建可靠的消息传递应用 如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言:现代化的应用程序需要支持可靠的消息传递,以实现实时更新和数据同步等功能。React是一种流行的JavaScript库,用于构建用户界面,而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用,并提供具体的代码示例。RabbitMQ概述:

React Router使用指南:如何实现前端路由控制 React Router使用指南:如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何实现前端路由控制随着单页应用的流行,前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库,提供了丰富的功能和易用的API,使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法,并提供一些具体的代码示例。安装ReactRouter首先,我们需

夸克怎么登录两个设备 夸克怎么登录两个设备 Feb 23, 2024 pm 10:55 PM

夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的,但是多数的小伙伴不知道夸克浏览器如何登陆两个设备,接下来就是小编为用户带来的夸克登陆两个设备方法图文教程,感兴趣的用户快来一起看看吧!夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP,主页面点击【夸克网盘】;2、接着进入到夸克网盘界面,选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。

See all articles