react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法
更新時間:2017年12月01日 11:49:24 作者:RitchieWei
本篇文章主要介紹了react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文介紹了react-navigation 如何判斷用戶是否登錄跳轉(zhuǎn)到登錄頁的方法,分享給大家,也給自己留個筆記,具體如下:
新建一個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('./img/ic_image.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), onNavigationStateChange:(()=> alert("首頁")) // initialRouteName:'IndexScreen' }, }, MeScreen: { screen: MeScreen, navigationOptions: { tabBarLabel:'我的', tabBarIcon: ({ tintColor }) => ( <Image source={require('./img/ic_me.png')} style={[styles.icon, {tintColor: tintColor}]} /> ), // initialRouteName:'MeScreen' } } }, { // trueinitialRouteName:'MeScreen',//設置默認的頁面組件 // initialRouteName:'MeScreen', lazy:true,//是否根據(jù)需要懶惰呈現(xiàn)標簽,而不是提前,意思是在app打開的時候?qū)⒌撞繕撕灆谌考虞d,默認false,推薦為true // order: ['IndexScreen','FindScreen','ListNewScreen','MeScreen'], //order 來定義tab顯示的順序,數(shù)組形式 animationEnabled: false, // 切換頁面時是否有動畫效果 tabBarPosition: 'bottom', // 顯示在底端,android 默認是顯示在頁面頂端的 swipeEnabled: false, // 是否可以左右滑動切換tab // backBehavior: 'none', // 按 back 鍵是否跳轉(zhuǎn)到第一個Tab(首頁), none 為不跳轉(zhuǎn) tabBarOptions: { activeTintColor: '#2196f3', // 文字和圖片選中顏色 inactiveTintColor: '#999', // 文字和圖片未選中顏色 showIcon: true, // android 默認不顯示 icon, 需要設置為 true 才會顯示 indicatorStyle: { height: 0 // 如TabBar下面顯示有一條線,可以設高度為0后隱藏 }, style: { backgroundColor: '#fff', // TabBar 背景色 height: 60 }, labelStyle: { fontSize: 14, // 文字大小 marginTop:2 // lineHeight:44 }, } }); //跳轉(zhuǎn)路由設置 const FirstApp = StackNavigator({ IndexScreen: { screen: MainScreenNavigator, // initialRouteName: 'IndexScreen' }, MeScreen: {screen: MeScreen}, Login:{screen: Login}, }, { initialRouteName: 'IndexScreen', // 默認顯示界面 navigationOptions: { // 屏幕導航的默認選項, 也可以在組件內(nèi)用 static navigationOptions 設置(會覆蓋此處的設置) headerStyle:{elevation: 0,shadowOpacity: 0,height:48,backgroundColor:"#2196f3"}, headerTitleStyle:{color:'#fff',fontSize:16}, //alignSelf:'center' 文字居中 headerBackTitleStyle:{color:'#fff',fontSize:12}, // headerTintColor:{}, gesturesEnabled:true,//是否支持滑動返回收拾,iOS默認支持,安卓默認關閉 }, mode: 'card', // 頁面切換模式, 左右是card(相當于iOS中的push效果), 上下是modal(相當于iOS中的modal效果) headerMode: 'screen', // 導航欄的顯示模式, screen: 有漸變透明效果, float: 無透明效果, none: 隱藏導航欄 onTransitionStart: (Start)=>{console.log('導航欄切換開始');}, // 回調(diào) onTransitionEnd: ()=>{ console.log('導航欄切換結(jié)束'); } // 回調(diào) }); // const defaultGetStateForAction = FirstApp.router.getStateForAction; FirstApp.router.getStateForAction = (action, state) => { //頁面是MeScreen并且 global.user.loginState = false || ''(未登錄) if (action.routeName ==='MeScreen'&& !global.user.loginState) { this.routes = [ ...state.routes, {key: 'id-'+Date.now(), routeName: 'Login', params: { name: 'name1'}}, ]; return { ...state, routes, index: this.routes.length - 1, }; } return defaultGetStateForAction(action, state); }; export default class FirstAppDemo extends Component { render() { return ( <FirstApp /> ); } } AppRegistry.registerComponent('FirstApp', () => FirstAppDemo); const styles = StyleSheet.create({ icon: { width: 26, height: 26, }, });
新建一個全局存儲StorageUtil.js
import React, {Component} from 'react'; import {AsyncStorage} from 'react-native'; import Storage from 'react-native-storage'; var storage = new Storage({ // 最大容量,默認值1000條數(shù)據(jù)循環(huán)存儲 size: 1000, // 存儲引擎:對于RN使用AsyncStorage,對于web使用window.localStorage // 如果不指定則數(shù)據(jù)只會保存在內(nèi)存中,重啟后即丟失 storageBackend: AsyncStorage, // 數(shù)據(jù)過期時間,默認一整天(1000 * 3600 * 24 毫秒),設為null則永不過期 defaultExpires: 1000 * 3600 * 24, // 讀寫時在內(nèi)存中緩存數(shù)據(jù)。默認啟用。 enableCache: true, // 如果storage中沒有相應數(shù)據(jù),或數(shù)據(jù)已過期, // 則會調(diào)用相應的sync方法,無縫返回最新數(shù)據(jù)。 // sync方法的具體說明會在后文提到 // 你可以在構(gòu)造函數(shù)這里就寫好sync的方法 // 或是寫到另一個文件里,這里require引入 // 或是在任何時候,直接對storage.sync進行賦值修改 //sync: require('./sync') // 這個sync文件是要你自己寫的 }) // 最好在全局范圍內(nèi)創(chuàng)建一個(且只有一個)storage實例,方便直接調(diào)用 // 對于web // window.storage = storage; // 對于react native // global.storage = storage; // 這樣,在此**之后**的任意位置即可以直接調(diào)用storage // 注意:全局變量一定是先聲明,后使用 // 如果你在某處調(diào)用storage報錯未定義 // 請檢查global.storage = storage語句是否確實已經(jīng)執(zhí)行過了 //導出為全局變量 global.storage = storage; 新建一個全局變量組件Global.js,用戶存儲用戶登錄的信息 //用戶登錄數(shù)據(jù) global.user = { loginState:'',//登錄狀態(tài) userData:'',//用戶數(shù)據(jù) }; //刷新的時候重新獲得用戶數(shù)據(jù) storage.load({ key: 'loginState', }).then(ret => { global.user.loginState = true; global.user.userData = ret; }).catch(err => { global.user.loginState = false; global.user.userData = ''; })
登錄組件 Login.js
_login() {//登錄函數(shù) // debugger; ToastUtil.show("登錄成功"); // 使用key來保存數(shù)據(jù)。這些數(shù)據(jù)一般是全局獨有的,常常需要調(diào)用的。 // 除非你手動移除,這些數(shù)據(jù)會被永久保存,而且默認不會過期。 storage.save({ key: 'loginState', // 注意:請不要在key中使用_下劃線符號! data: { userid: '1001', userName:'userName', token: 'token' }, // 如果不指定過期時間,則會使用defaultExpires參數(shù) // 如果設為null,則永不過期 // 8個小時后過期 expires: 1000 * 3600 * 8 }); global.user.loginState = true;//設置登錄狀態(tài) global.user.userData = { userid: '1001', userName:'userName', token: 'token'};//保存用戶數(shù)據(jù) setTimeout(()=>{ this.props.navigation.navigate('UserScreen')//跳轉(zhuǎn)到用戶頁面 },2000) }
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關文章
Ant Design與Ant Design pro入門使用教程
Ant Design 是一個服務于企業(yè)級產(chǎn)品的設計體系,組件庫是它的 React 實現(xiàn),antd 被發(fā)布為一個 npm 包方便開發(fā)者安裝并使用,這篇文章主要介紹了Ant Design與Ant Design pro入門,需要的朋友可以參考下2023-12-12React?createRef循環(huán)動態(tài)賦值ref問題
這篇文章主要介紹了React?createRef循環(huán)動態(tài)賦值ref問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-01-01從零搭建Webpack5-react腳手架的實現(xiàn)步驟(附源碼)
本文主要介紹了從零搭建Webpack5-react腳手架的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08ReactNative 之FlatList使用及踩坑封裝總結(jié)
本篇文章主要介紹了ReactNative 之FlatList使用及踩坑封裝總結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11