反应导航不导航

时间:2018-12-22 13:40:55

标签: javascript reactjs firebase react-native firebase-authentication

我正在开发应用程序,并在onAuthStateChanged中使用Firebase的侦听器AuthenticationLoadingScreen,因此我可以根据此状态重定向用户,但是,它只是打开一个白页而没有打开主屏幕。

编辑:有人说也许app.js是问题,所以我在这里添加了它

import HomeScreen from '../screens/HomeScreen'
import AuthScreen from '../screens/AuthScreen'

// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.

const AppStack = createStackNavigator({ Home: HomeScreen});
const AuthStack = createStackNavigator({ Home: HomeScreen });

export default createAppContainer(createSwitchNavigator(
  {
    AuthLoading: AuthScreen,
    App: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'AuthLoading',
  }
));

export default class AuthScreen extends React.Component {

  constructor(props){
      super(props);
  }

  componentDidMount = ()=>{
    firebase.auth().onAuthStateChanged(user => {
      this.props.navigation.navigate(user ? 'App' : 'Auth');

    });
  }

  render() {
    return (
      <ImageBackground
        source={require('../assets/images/AuthScreenBackground.png')}
        style={styles.ImageBackground}/>
    );
  }
}

这是App.js代码:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigation from './navigation/AppNavigation.js'


import * as firebase from 'firebase'

var config = {

  };
firebase.initializeApp(config);


export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <AppNavigation/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

1 个答案:

答案 0 :(得分:0)

尝试此代码:

componentWillMount() {
    this.observeLogin = firebase.auth().onAuthStateChanged(user => {
        if (user) {
            this.props.navigation.navigate('App');
        } else {
            this.props.navigation.navigate('Auth');
        }

    });
}

componentWillUnmount() {
    // Don't forget to unsubscribe when the component unmounts
    this.observeLogin ();
}