web-dev-qa-db-ja.com

ユーザーの状態をチェックしてreact-native-router-fluxの初期シーンを設定するにはどうすればよいですか？

ログイン状態に基づいてreact-native-router-fluxの初期シーンを設定する方法。これが私がこの機能を実現したい私のコードです。ユーザーがログインしている場合はシーン2、ユーザーがログインしていない場合はシーン1が必要です。

このコードで問題が発生しました。ユーザーがログインした状態では、シーン2ではなく常に最初の画面が返されます。

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Scene1 from '../Scene1';
import Scene2 from '../Scene2';

// localization strings
import strings from '../config/localization';

import styles from './Styles';

class Routes extends Component {
  state = {
    isUserLogin: false
  }
  async componentDidMount() {
    await AsyncStorage.getItem('user', (err, result) => {
      if (result != null) {
        this.setState({ isUserLogin: JSON.parse(result).isUserLoggedIn });
      }
      if (__DEV__) {
        console.log('routes', this.state); // return trur or false if user logged in or not
      }
    });
  }
  render() {
    return {
      <Router
        backAndroidHandler={() => Actions.pop()}
        sceneStyle={styles.sceneStyle}
        >
          <Scene key="root">
            <Scene
              key="merchants"
              component={Scene1}
              title={strings.selectBusiness}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              initial={!this.state.isUserLogin}
            />
            <Scene
              key="initializeStore"
              component={Scene2}
              hideNavBar
              initial={this.state.isUserLogin}
            />
            <Scene
              key="login"
              component={Login}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              back
              renderBackButton={renderBackButton}
            />
          </Scene>
      </Router>
    }
  }
}

export default Routes;
react-nativereact-native-router-flux
6
Shubham

これは、RNRFV4を介して各onに提供されるsuccess、failure、およびScene小道具を使用して実現できます。

以下は、コードに追加する方法です。

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';
import Scene1 from '../Scene1';
import Scene2 from '../Scene2';

// localization strings
import strings from '../config/localization';

import styles from './Styles';

class Routes extends Component {
  state = {
    isUserLogin: false
  }
  async componentDidMount() {
    await AsyncStorage.getItem('user', (err, result) => {
      if (result != null) {
        this.setState({ isUserLogin: JSON.parse(result).isUserLoggedIn });
      }
      if (__DEV__) {
        console.log('routes', this.state); // return trur or false if user logged in or not
      }
    });
  }

// HELPER FUNCTION FOR AUTH
  authenticate = () => {
    this.state.isUserLogin ? true : false
  }

  render() {
    return {
      <Router
        backAndroidHandler={() => Actions.pop()}
        sceneStyle={styles.sceneStyle}
        >
          <Scene key="root">
            <Scene 
              key="Launch" 
              component="Launch"
              initial
              on={this.authenticate}
              success="Scene2"
              failure="Scene1"
            />
            <Scene
              key="merchants"
              component={Scene1}
              title={strings.selectBusiness}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              initial={!this.state.isUserLogin}
            />
            <Scene
              key="initializeStore"
              component={Scene2}
              hideNavBar
              initial={this.state.isUserLogin}
            />
            <Scene
              key="login"
              component={Login}
              navigationBarStyle={styles.navigationBarStyle}
              navBarButtonColor={styles.navBarButtonColor}
              titleStyle={styles.titleStyle}
              back
              renderBackButton={renderBackButton}
            />
          </Scene>
      </Router>
    }
  }
}

export default Routes;

追加されたLaunchシーンは、RNRFがロジックを実行しているときに表示される単なるプレースホルダーシーンです。このシーンをシンプルにして、ロゴなど、長く表示されないので好きなものを追加するだけです。

思考の糧

あなたのRouterはこの方法でLoginにたどり着くのに苦労するでしょう。 「ログインシーン」と「ログアウトシーン」の各セクションをstackまたはsceneでラップすると、onリダイレクトの流れが良くなります。

私がこれをどのように処理するかを知りたい場合は、私のリポジトリをチェックしてください ここ ！

5
richTheCreator

私も同じ問題を抱えています。ユーザーがログインしている場合は、ナビゲーション画面ではなくウェルカム画面で確認する必要があります。

ここをチェックしてください： ここにリンクの説明を入力してください

これを追加します

type={ActionConst.RESET}

あなたの<Scene>ユーザーがログインしている場合に最初に来たいもの。

0
Sandeep Mishra