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,//是否根據需要懶惰呈現標簽，而不是提前，意思是在app打開的時候將底部標簽欄全部加載，默認false,推薦為true     // order: ['IndexScreen','FindScreen','ListNewScreen','MeScreen'], //order 來定義tab顯示的順序，數組形式     animationEnabled: false, // 切換頁面時是否有動畫效果     tabBarPosition: 'bottom', // 顯示在底端，android 默認是顯示在頁面頂端的     swipeEnabled: false, // 是否可以左右滑動切換tab     // backBehavior: 'none', // 按 back 鍵是否跳轉到第一個Tab(首頁)， none 為不跳轉     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       },     }   });  //跳轉路由設置 const FirstApp = StackNavigator({   IndexScreen: {     screen: MainScreenNavigator,     // initialRouteName: 'IndexScreen'   },   MeScreen: {screen: MeScreen},   Login:{screen: Login},    }, {   initialRouteName: 'IndexScreen', // 默認顯示界面   navigationOptions: { // 屏幕導航的默認選項, 也可以在組件內用 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('導航欄切換開始');}, // 回調   onTransitionEnd: ()=>{ console.log('導航欄切換結束'); } // 回調 }); // 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,   }, }); 

import React, {Component} from 'react'; import {AsyncStorage} from 'react-native'; import Storage from 'react-native-storage';  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('./sync') // 這個sync文件是要你自己寫的 })  // 最好在全局范圍內創建一個（且只有一個）storage實例，方便直接調用  // 對于web // window.storage = storage;  // 對于react native // global.storage = storage;  // 這樣，在此**之后**的任意位置即可以直接調用storage // 注意：全局變量一定是先聲明，后使用 // 如果你在某處調用storage報錯未定義 // 請檢查global.storage = storage語句是否確實已經執行過了  //導出為全局變量 global.storage = storage; 新建一個全局變量組件Global.js，用戶存儲用戶登錄的信息 //用戶登錄數據 global.user = {   loginState:'',//登錄狀態   userData:'',//用戶數據 }; //刷新的時候重新獲得用戶數據  storage.load({   key: 'loginState', }).then(ret => {   global.user.loginState = true;   global.user.userData = ret; }).catch(err => {   global.user.loginState = false;   global.user.userData = ''; }) 

_login() {//登錄函數     // debugger;     ToastUtil.show("登錄成功");     // 使用key來保存數據。這些數據一般是全局獨有的，常常需要調用的。     // 除非你手動移除，這些數據會被永久保存，而且默認不會過期。     storage.save({       key: 'loginState', // 注意:請不要在key中使用_下劃線符號!       data: {         userid: '1001',         userName:'userName',         token: 'token'       },        // 如果不指定過期時間，則會使用defaultExpires參數       // 如果設為null，則永不過期       // 8個小時后過期       expires: 1000 * 3600 * 8     });     global.user.loginState = true;//設置登錄狀態     global.user.userData = { userid: '1001', userName:'userName', token: 'token'};//保存用戶數據      setTimeout(()=>{       this.props.navigation.navigate('UserScreen')//跳轉到用戶頁面     },2000)        }