如何使用反應導航在屏幕之間切換？

Question

我創建了3個組件。 1）登錄屏幕2）VenueList屏幕3）菜單屏幕我創建了另一個名為AuthLoading的組件。該組件將用戶從登錄屏幕導航到VenueList屏幕。 AuthLoading是橋接組件，用於連接登錄前和登錄后組件。

登錄屏幕上有一個按鈕，onclick將觸發loginAction.js，並且用戶被導航到Web瀏覽器，在此他輸入電子郵件/密碼。 收到accessToken后，必須將用戶導航到VenueList屏幕，但switchNavigator不起作用。 我該如何實施呢？

Login.js：

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from '../actions/loginAction';

class Login extends Component {

  _signInAsync = async () => {
    await AsyncStorage.setItem('accessToken', this.props.accessToken);
    this.props.navigation.navigate('App');
  }

  render() {

    console.log(this.props.accessToken);

    return (
      <View style={styles.container}>
        <Button
        onPress={this.props.loginUser}
        title="Click to Login"
        ></Button>
      </View>
    );
  }

}

loginAction.js：

import { LOGIN_USER } from './types';
import Auth0 from 'react-native-auth0';

var credentials = require('./auth0-credentials');
const auth0 = new Auth0(credentials);

export const loginUser = () => dispatch => {

    auth0.webAuth
    .authorize({
      scope: 'openid profile',
      audience: 'https://' + credentials.domain + '/userinfo'
    })
    .then(credentials => 

        dispatch({
            type: LOGIN_USER,
            payload: credentials.accessToken
        })
    )
    .catch(error => console.log(error));

};

authLoading.js：

import React, { Component } from 'react';
import { StyleSheet, View, ActivityIndicator, AsyncStorage, StatusBar } from 'react-native';

export default class AuthLoading extends Component {

  constructor() {
    super();
    this._bootstrapAsync();
  }

  _bootstrapAsync = async () => {
    const accessToken = await AsyncStorage.getItem('accessToken');

    // This will switch to the App screen or Auth screen and this loading
    // screen will be unmounted and thrown away.
    this.props.navigation.navigate(accessToken ? 'App' : 'Auth');
  };

  render() {

    return (
        <View style={styles.container}>
            <ActivityIndicator />
            <StatusBar barStyle="default" />
        </View>
    );
  }

}

app.js：

const AppStack = createStackNavigator({ Venues: VenueList, Menu: ItemsMenu });
const AuthStack = createStackNavigator({ Login: Login });

const AppStackNavigator = createSwitchNavigator(
  {
    AuthLoading: AuthLoadingScreen,
    App: AppStack,
    Auth: AuthStack,
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

截圖：

在上面的屏幕截圖中，在收到accessToken之后，用戶再次導航回登錄屏幕，但我想將用戶導航到VenueList屏幕。

Answer 1

您可以檢查是否在Login組件中的呈現功能開始時設置了accessToken並在Login VenueList用戶導航到VenueList屏幕。

class Login extends Component {

  _signInAsync = async () => {
    await AsyncStorage.setItem('accessToken', this.props.accessToken);
    this.props.navigation.navigate('App');
  }

  render() {
    if(this.props.accessToken) {
      this.props.navigation.navigate('VenueList')
    }

    return (
      <View style={styles.container}>
        <Button
        onPress={this.props.loginUser}
        title="Click to Login"
        ></Button>
      </View>
    );
  }

}

Answer 2

您不應該在渲染中導航。 在componentDidMount()或componetDidUpdate()

class Login extends Component {

  _signInAsync = async () => {
    await AsyncStorage.setItem('accessToken', this.props.accessToken);
    this.props.navigation.navigate('App');
  }

  componentDidMount(){
    if(this.props.accessToken) {
      this.props.navigation.navigate('VenueList')
    }
  }

  render() {

    return (
      <View style={styles.container}>
        <Button
        onPress={this.props.loginUser}
        title="Click to Login"
        ></Button>
      </View>
    );
  }

}