Heim Web-Frontend js-Tutorial So ermitteln Sie, ob der Benutzer angemeldet ist, und springen in der React-Navigation zur Anmeldeseite

So ermitteln Sie, ob der Benutzer angemeldet ist, und springen in der React-Navigation zur Anmeldeseite

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

In diesem Artikel wird hauptsächlich erläutert, wie React-Navigation feststellt, ob der Benutzer angemeldet ist und zur Anmeldeseite springt. Interessierte Freunde können darauf verweisen.

In diesem Artikel wird React-Navigation vorgestellt um festzustellen, ob der Benutzer angemeldet ist, und zur Anmeldeseite springen? Teilen Sie es mit allen und hinterlassen Sie eine Notiz für sich selbst. Die Details lauten wie folgt:

Erstellen Sie eine neue 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, 
  }, 
});
Nach dem Login kopieren

Erstellen Sie einen globalen Speicher 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;; 
})
Nach dem Login kopieren

Anmeldekomponente 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) 
     
  }
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Interpretation der Navigationsnutzung von React-Navigation

Detaillierte Interpretation der Funktionsfunktion in Javascript (ausführliches Tutorial )

So implementieren Sie eine benutzerdefinierte Visualisierung mit AngularJS2 integriert in D3.js

So implementieren Sie sequentielles Laden und Ausführen von js-Methoden in Javascript

Das obige ist der detaillierte Inhalt vonSo ermitteln Sie, ob der Benutzer angemeldet ist, und springen in der React-Navigation zur Anmeldeseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Was soll ich tun, wenn ich das Hintergrundbild einer anderen Person herunterlade, nachdem ich mich bei WallpaperEngine bei einem anderen Konto angemeldet habe? Mar 19, 2024 pm 02:00 PM

Wenn Sie sich auf Ihrem Computer beim Steam-Konto einer anderen Person anmelden und das Konto dieser anderen Person über eine Hintergrundsoftware verfügt, lädt Steam automatisch die Hintergrundbilder herunter, die für das Konto der anderen Person abonniert wurden, nachdem Sie zu Ihrem eigenen Konto zurückgewechselt haben Deaktivieren der Steam-Cloud-Synchronisierung. Was tun, wenn WallpaperEngine die Hintergrundbilder anderer Personen herunterlädt, nachdem Sie sich bei einem anderen Konto angemeldet haben? 1. Melden Sie sich bei Ihrem eigenen Steam-Konto an, suchen Sie in den Einstellungen nach der Cloud-Synchronisierung und deaktivieren Sie die Steam-Cloud-Synchronisierung. 2. Melden Sie sich bei dem Steam-Konto einer anderen Person an, bei dem Sie sich zuvor angemeldet haben, öffnen Sie den Wallpaper Creative Workshop, suchen Sie nach den Abonnementinhalten und kündigen Sie dann alle Abonnements. (Falls Sie das Hintergrundbild in Zukunft nicht mehr finden, können Sie es zunächst abholen und dann das Abonnement kündigen.) 3. Wechseln Sie zurück zu Ihrem eigenen Steam

Wie melde ich mich bei meinem vorherigen Konto auf Xiaohongshu an? Was soll ich tun, wenn die ursprüngliche Nummer nach der erneuten Verbindung verloren geht? Wie melde ich mich bei meinem vorherigen Konto auf Xiaohongshu an? Was soll ich tun, wenn die ursprüngliche Nummer nach der erneuten Verbindung verloren geht? Mar 21, 2024 pm 09:41 PM

Mit der rasanten Entwicklung der sozialen Medien ist Xiaohongshu für viele junge Menschen zu einer beliebten Plattform geworden, auf der sie ihr Leben teilen und neue Produkte entdecken können. Während der Nutzung können Benutzer manchmal auf Schwierigkeiten stoßen, sich bei früheren Konten anzumelden. In diesem Artikel wird ausführlich erläutert, wie das Problem der Anmeldung beim alten Konto auf Xiaohongshu gelöst werden kann und wie mit der Möglichkeit umgegangen werden kann, dass das ursprüngliche Konto nach dem Ändern der Bindung verloren geht. 1. Wie melde ich mich bei Xiaohongshus vorherigem Konto an? 1. Rufen Sie das Passwort ab und melden Sie sich an. Wenn Sie sich längere Zeit nicht bei Xiaohongshu anmelden, wird Ihr Konto möglicherweise vom System recycelt. Um die Zugriffsrechte wiederherzustellen, können Sie versuchen, sich erneut bei Ihrem Konto anzumelden, indem Sie Ihr Passwort abrufen. Die Bedienungsschritte sind wie folgt: (1) Öffnen Sie die Xiaohongshu-App oder die offizielle Website und klicken Sie auf die Schaltfläche „Anmelden“. (2) Wählen Sie „Passwort abrufen“. (3) Geben Sie die Mobiltelefonnummer ein, die Sie bei der Registrierung Ihres Kontos verwendet haben

Discuz-Lösung für das Anmeldeproblem im Hintergrund enthüllt Discuz-Lösung für das Anmeldeproblem im Hintergrund enthüllt Mar 03, 2024 am 08:57 AM

Die Lösung für das Discuz-Hintergrund-Login-Problem wird aufgezeigt. Mit der rasanten Entwicklung des Internets ist die Website-Erstellung immer häufiger geworden, und Discuz wurde als häufig verwendetes Forum-Website-Erstellungssystem bevorzugt viele Webmaster. Gerade aufgrund seiner leistungsstarken Funktionen stoßen wir jedoch manchmal auf Probleme bei der Verwendung von Discuz, wie z. B. Probleme bei der Anmeldung im Hintergrund. Heute werden wir die Lösung für das Discuz-Hintergrund-Login-Problem enthüllen und konkrete Codebeispiele bereitstellen. Wir hoffen, den Bedürftigen zu helfen.

So melden Sie sich bei der Kuaishou-PC-Version an - So melden Sie sich bei der Kuaishou-PC-Version an So melden Sie sich bei der Kuaishou-PC-Version an - So melden Sie sich bei der Kuaishou-PC-Version an Mar 04, 2024 pm 03:30 PM

Kürzlich haben mich einige Freunde gefragt, wie man sich bei der Kuaishou-Computerversion anmeldet. Hier ist die Anmeldemethode für die Kuaishou-Computerversion. Schritt 1: Suchen Sie zunächst im Browser Ihres Computers nach der offiziellen Website von Kuaishou auf Baidu. Schritt 2: Wählen Sie das erste Element in der Suchergebnisliste aus. Schritt 3: Nachdem Sie die Hauptseite der offiziellen Website von Kuaishou aufgerufen haben, klicken Sie auf die Videooption. Schritt 4: Klicken Sie oben rechts auf den Benutzer-Avatar. Schritt 5: Klicken Sie auf den QR-Code, um sich im Popup-Anmeldemenü anzumelden. Schritt 6: Öffnen Sie dann Kuaishou auf Ihrem Telefon und klicken Sie auf das Symbol in der oberen linken Ecke. Schritt 7: Klicken Sie auf das QR-Code-Logo. Schritt 8: Nachdem Sie auf das Scan-Symbol in der oberen rechten Ecke der Benutzeroberfläche „Mein QR-Code“ geklickt haben, scannen Sie den QR-Code auf Ihrem Computer. Schritt 9: Melden Sie sich abschließend bei der Computerversion von Kuaishou an

So melden Sie sich bei Quark bei zwei Geräten an So melden Sie sich bei Quark bei zwei Geräten an Feb 23, 2024 pm 10:55 PM

Wie melde ich mich mit Quark bei zwei Geräten an? Quark Browser unterstützt die gleichzeitige Anmeldung bei zwei Geräten, aber die meisten Freunde wissen nicht, wie sie sich mit Quark Browser bei zwei Geräten anmelden können zu zwei Geräten. Interessierte Benutzer kommen vorbei und schauen sich die grafischen Tutorials an! Tutorial zur Quark Browser-Nutzung Quark, wie man sich bei zwei Geräten anmeldet 1. Öffnen Sie zunächst die Quark Browser-APP und klicken Sie auf der Hauptseite auf [Quark Network Disk] 2. Rufen Sie dann die Quark Network Disk-Benutzeroberfläche auf und wählen Sie die Dienstfunktion [Mein Backup]. 3. Wählen Sie abschließend [Gerät wechseln], um sich bei zwei neuen Geräten anzumelden.

Wie gebe ich die Webversion von Baidu Netdisk ein? Anmeldeeingang für die Baidu Netdisk-Webversion Wie gebe ich die Webversion von Baidu Netdisk ein? Anmeldeeingang für die Baidu Netdisk-Webversion Mar 13, 2024 pm 04:58 PM

Baidu Netdisk kann nicht nur verschiedene Softwareressourcen speichern, sondern diese auch mit anderen teilen. Es unterstützt die Multi-Terminal-Synchronisierung. Wenn auf Ihrem Computer kein Client heruntergeladen wurde, können Sie die Webversion aufrufen. Wie melde ich mich also bei der Baidu Netdisk-Webversion an? Werfen wir einen Blick auf die ausführliche Einführung. Anmeldeeingang für die Webversion von Baidu Netdisk: https://pan.baidu.com (Kopieren Sie den Link zum Öffnen in den Browser) Einführung in die Software 1. Teilen Bietet eine Dateifreigabefunktion, Benutzer können Dateien organisieren und sie mit bedürftigen Freunden teilen. 2. Cloud: Es beansprucht nicht zu viel Speicher. Die meisten Dateien werden in der Cloud gespeichert, wodurch effektiv Platz auf dem Computer gespart wird. 3. Fotoalbum: Unterstützt die Cloud-Fotoalbum-Funktion, importiert Fotos auf die Cloud-Festplatte und organisiert sie dann, damit jeder sie sehen kann.​

Wie melde ich mich an, wenn Xiaohongshu sich nur an das Konto erinnert? Ich weiß nur noch, wie ich mein Konto abrufen kann? Wie melde ich mich an, wenn Xiaohongshu sich nur an das Konto erinnert? Ich weiß nur noch, wie ich mein Konto abrufen kann? Mar 23, 2024 pm 05:31 PM

Xiaohongshu ist mittlerweile in das tägliche Leben vieler Menschen integriert und erfreut die Benutzer mit seinen reichhaltigen Inhalten und praktischen Bedienmethoden. Manchmal vergessen wir das Kontopasswort. Es ist wirklich ärgerlich, sich nur an das Konto zu erinnern, sich aber nicht anmelden zu können. 1. Wie melde ich mich an, wenn Xiaohongshu sich nur an das Konto erinnert? Wenn wir unser Passwort vergessen, können wir uns über den Bestätigungscode auf unserem Mobiltelefon bei Xiaohongshu anmelden. Die spezifischen Vorgänge sind wie folgt: 1. Öffnen Sie die Xiaohongshu-App oder die Webversion von Xiaohongshu. 2. Klicken Sie auf die Schaltfläche „Anmelden“ und wählen Sie „Konto und Passwort anmelden“. 4. Klicken Sie auf die Schaltfläche „Passwort vergessen“. . Geben Sie Ihre Kontonummer ein. 5. Das System sendet einen Bestätigungscode an Ihr Mobiltelefon. Geben Sie den Bestätigungscode ein und klicken Sie auf „OK“. Sie können auch ein Drittanbieterkonto verwenden (z. B

115 Anmeldeeingang für die Netdisk-Webversion 115 Anmeldeeingang für die Netdisk-Webversion Feb 23, 2024 pm 02:04 PM

115 Netdisk ist eine Netdisk, die viele Ressourcen speichern kann. Wie lautet also der Anmeldeeingang für die 115 Netdisk-Webversion? Benutzer müssen die URL https://115.com eingeben, um auf die Netdisk zuzugreifen, und können sie nach der Anmeldung verwenden . Diese 115 Netdisk-Webversions-Anmeldung mit der neuesten Zugangsfreigabe kann Ihnen erklären, wie Sie diese Funktion verwenden. Werfen Sie also einen Blick darauf. 115 Netdisk-Webversion, Anmeldeportal, Website-Freigabe: https://115.com Detaillierte Einführung: 1. Zuerst müssen Sie eine Möglichkeit auswählen, sich bei Netdisk anzumelden. 2. Sie können die hochgeladene Datei in der oberen rechten Ecke sehen. 3. Hier können Sie einen neuen Ordner erstellen und zwischen verschiedenen Modi wechseln. 4. Sie können der Datei verschiedene Tags hinzufügen. 5. Die privaten Nachrichten der Nutzer sind auf der Website einsehbar.

See all articles