成功登录后如何重定向？ 在本机+博览会

Question

嗨，我是一个新手，学习React Native + Expo的问题，我无法弄清楚登录成功/登录失败后如何重定向

到目前为止，这是我的代码：

import React from 'react';
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
import { Facebook } from 'expo';
import firebase from 'firebase';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './screens/HomeScreen';

// Enter your Facebooko app ID here.
const FACEBOOK_APP_ID = '';

// Enter your Firebase app web configuration settings here.
const config = {

};

firebase.initializeApp(config);

const auth = firebase.auth();
const provider = new firebase.auth.FacebookAuthProvider();

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      logInStatus: 'signed out',
      errorMessage: 'none'
    };
  }

  componentWillMount() {
    auth.onAuthStateChanged(user => {
      if (user != null) {
        this.setState({ logInStatus: 'We are authenticated now!' });
      } else {
        this.setState({ logInStatus: 'You are currently logged out.' });
      }
    });
  }

  async handleFacebookButton() {
    const { type, token } = await Facebook.logInWithReadPermissionsAsync(FACEBOOK_APP_ID, {
      permissions: ['public_profile', 'email']
    });
    if (type === 'success') {
      //Firebase credential is created with the Facebook access token.
      const credential = firebase.auth.FacebookAuthProvider.credential(token);
      auth.signInWithCredential(credential).catch(error => {
        this.setState({ errorMessage: error.message });
      });
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          style={styles.facebookButton}
          name="Facebook"
          underlayColor={styles.facebookButton.backgroundColor}
          onPress={() => this.handleFacebookButton()}
        >
          <Text style={styles.facebookButtonText}>Log in with Facebook</Text>
        </TouchableHighlight>
        <View style={styles.space} />
        <Text>Logged In Status: {this.state.logInStatus}</Text>
        <View style={styles.space} />
        <Text> Log In Error Messages: {this.state.errorMessage}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center'
  },
  facebookButton: {
    width: 375 * 0.75,
    height: 48,
    borderRadius: 50,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#3B5998'
  },
  facebookButtonText: {
    color: '#fff'
  },
  space: {
    height: 17
  }
});

我发现一些人使用这种语法<RootNavigation />示例，但有时他们使用Navigation（'page'）有什么区别？ 在哪里可以了解有关此主题的更多信息？

多谢你们 ！！

Answer 1

您可以在this.props.navigation.navigate内部调用onAuthStateChanged并重定向。 navigate通过将其添加到堆栈中来导航到屏幕，在两种情况下都需要。 但是，有些人不希望将登录页面留在堆栈中，而是希望更改导航器本身，或者使用NavigationActions和this.props.navigation.dispatch的组合来重置导航堆栈。

Answer 2

成功登录后的重定向可以通过react-navigation和this.props.navigation.navigate来实现。
首先，您需要使用createStackNavigator和createAppContainer为'Page'设置导航createAppContainer ，然后使用this.props.navigation.navigate('Page') 。

身份验证流程显示了有关该主题的一个很好的示例。