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: '首頁(yè)',         headerLeft:null,//去除返回按鈕         tabBarIcon: ({ tintColor }) => (           <Image             source={require('./img/ic_image.png')}             style={[styles.icon, {tintColor: tintColor}]}           />         ),         onNavigationStateChange:(()=> alert("首頁(yè)"))         // 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)的頁(yè)面組件     // initialRouteName:'MeScreen',     lazy:true,//是否根據(jù)需要懶惰呈現(xiàn)標(biāo)簽，而不是提前，意思是在app打開(kāi)的時(shí)候?qū)⒌撞繕?biāo)簽欄全部加載，默認(rèn)false,推薦為true     // order: ['IndexScreen','FindScreen','ListNewScreen','MeScreen'], //order 來(lái)定義tab顯示的順序，數(shù)組形式     animationEnabled: false, // 切換頁(yè)面時(shí)是否有動(dòng)畫(huà)效果     tabBarPosition: 'bottom', // 顯示在底端，android 默認(rèn)是顯示在頁(yè)面頂端的     swipeEnabled: false, // 是否可以左右滑動(dòng)切換tab     // backBehavior: 'none', // 按 back 鍵是否跳轉(zhuǎn)到第一個(gè)Tab(首頁(yè))， 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', // 頁(yè)面切換模式, 左右是card(相當(dāng)于iOS中的push效果), 上下是modal(相當(dāng)于iOS中的modal效果)   headerMode: 'screen', // 導(dǎo)航欄的顯示模式, screen: 有漸變透明效果, float: 無(wú)透明效果, none: 隱藏導(dǎo)航欄   onTransitionStart: (Start)=>{console.log('導(dǎo)航欄切換開(kāi)始');}, // 回調(diào)   onTransitionEnd: ()=>{ console.log('導(dǎo)航欄切換結(jié)束'); } // 回調(diào) }); // const defaultGetStateForAction = FirstApp.router.getStateForAction;  FirstApp.router.getStateForAction = (action, state) => {   //頁(yè)面是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({   // 最大容量，默認(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ù)過(guò)期時(shí)間，默認(rèn)一整天（1000 * 3600 * 24 毫秒），設(shè)為null則永不過(guò)期   defaultExpires: 1000 * 3600 * 24,    // 讀寫(xiě)時(shí)在內(nèi)存中緩存數(shù)據(jù)。默認(rèn)啟用。   enableCache: true,    // 如果storage中沒(méi)有相應(yīng)數(shù)據(jù)，或數(shù)據(jù)已過(guò)期，   // 則會(huì)調(diào)用相應(yīng)的sync方法，無(wú)縫返回最新數(shù)據(jù)。   // sync方法的具體說(shuō)明會(huì)在后文提到   // 你可以在構(gòu)造函數(shù)這里就寫(xiě)好sync的方法   // 或是寫(xiě)到另一個(gè)文件里，這里require引入   // 或是在任何時(shí)候，直接對(duì)storage.sync進(jìn)行賦值修改   //sync: require('./sync') // 這個(gè)sync文件是要你自己寫(xiě)的 })  // 最好在全局范圍內(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語(yǔ)句是否確實(shí)已經(jīng)執(zhí)行過(guò)了  //導(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() {//登錄函數(shù)     // debugger;     ToastUtil.show("登錄成功");     // 使用key來(lái)保存數(shù)據(jù)。這些數(shù)據(jù)一般是全局獨(dú)有的，常常需要調(diào)用的。     // 除非你手動(dòng)移除，這些數(shù)據(jù)會(huì)被永久保存，而且默認(rèn)不會(huì)過(guò)期。     storage.save({       key: 'loginState', // 注意:請(qǐng)不要在key中使用_下劃線符號(hào)!       data: {         userid: '1001',         userName:'userName',         token: 'token'       },        // 如果不指定過(guò)期時(shí)間，則會(huì)使用defaultExpires參數(shù)       // 如果設(shè)為null，則永不過(guò)期       // 8個(gè)小時(shí)后過(guò)期       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)到用戶頁(yè)面     },2000)        }