代码之家  ›  专栏  ›  技术社区  ›  fun joker

如何使用react导航在屏幕之间切换?

  •  1
  • fun joker  · 技术社区  · 7 年前

    我已经创建了3个组件。1) 登录屏幕2)VenueList屏幕3)菜单屏幕

    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',
      }
    );
    

    截图:

    enter image description here

    2 回复  |  直到 5 年前
        1
  •  1
  •   Sajad Rastegar    7 年前

    你可以检查一下 accessToken 在中的渲染函数的开始处设置 Login 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>
        );
      }
    
    }
    
        2
  •  1
  •   AS Mackay Kushan Gowda    6 年前

    不应在渲染中导航。在里面做 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>
        );
      }
    
    }