Question

如何根据用户登录状态在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;

Answer 1

这可以通过使用通过RNRF V4为每个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。包装每个部分，＆＃34;登录场景＆＃34; ＆安培; ＆＃34;在scene或on中注销的场景＆＃34;将允许#include <stdio.h> int iFactorial(int iCount) { int iProduct = 1; int iNumber = 1; while (iNumber <= iCount) { iProduct *= iNumber; iNumber++; } return iProduct; } int main(void) { int iFac[10] = {0}; int iCount = 0; for (iCount = 0; iCount < 9; iCount++) iFac[iCount] = iFactorial(iCount); for (iCount = 0; iCount < 9; iCount++) printf("\nThe value of the factorial is %d\n", iFac[iCount]); return 0; }重定向更好地流动。

如果您想了解我如何处理此问题，请查看我的回购here！

Answer 2

我也有同样的问题，如果用户已登录，您必须在欢迎屏幕而不是导航屏幕上查看。

请点击此处：enter link description here

并添加此

type={ActionConst.RESET}

在<Scene>中，如果用户已登录，您希望首先出现。

如何在react-native-router-flux中设置初始场景并检查用户的状态？

2 个答案:

深思熟虑