javascript - 登录成功后如何跳转？在 native + 世博会

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 />但有时他们使用 navigate('page') 有什么区别？我在哪里可以了解有关此主题的更多信息？

谢谢大家!!

Answer 1

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

Authentication flows展示了关于该主题的一个很好的例子。