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

Question

Hi im a newbie learning react native + expo i cant figure out how to redirect after a successful login / failed login

this is my code so far:

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

I found some examples people uses this syntax <RootNavigation /> but sometimes they use navigate('page') what is the difference? where i can learn more about this topic?

Thanks guys !!

Answer 1

You can call this.props.navigation.navigate inside your onAuthStateChanged and redirect. navigate navigates you to a screen by adding it to the stack, and in both cases you need that. Some people however, do not want to leave login page in the stack and either change the navigator itself or reset navigation stack with the combination of NavigationActions and this.props.navigation.dispatch .

Answer 2

Redirect after successful login can be implemented with react-navigation and this.props.navigation.navigate .
First you need to set up navigators for 'Page' with createStackNavigator and createAppContainer and then use this.props.navigation.navigate('Page') .

Authentication flows shows a good example on that topic.