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