Navigation.navigate никуда не денется

Question

Я следовал руководству по реагированию на потоки аутентификации (https://reactnavigation.org/docs/en/auth-flow.html) с небольшим изменением. Я вложил навигатор вкладок в LoginScreen. Я не уверен почему, потому что я действительно новичок в React Native, нокажется, что все внутри функции входа в систему работает, за исключением части, в которой он должен перейти к главному навигатору.

Это мой основной процесс аутентификации:

В основном я хочу перейти от ЗЕЛЕНОГО к КРАСНОМУ, но ничего не происходит на

navigation.navigate('App');

Вот мои файлы навигатора:

AuthNavigator

import{
  createSwitchNavigator
} from 'react-navigation';

//Import necessary Components and Navigators
import AuthLoading from '../components/AuthLoadingComponent';
import DrawerNavigator from './DrawerNavigator';
import AuthComponent from '../components/AuthComponent';


export default createSwitchNavigator(
  {
    AuthLoading: AuthLoading,
    App: DrawerNavigator,
    Auth: AuthComponent
  },
  {
    initialRouteName: 'AuthLoading',
  }
);

AuthComponent (Содержит кнопки входа в систему и LoginNavigator)

export default class AuthComponent extends Component{

  constructor(props){
    super(props);
  }

  facebookLogin(){

  }

  googleLogin(){

  }

  render() {
    return(
      <View style={styles.container}>

        <View style={styles.socialContainer}>
          <SocialIcon
            title='Conectar con Facebook'
            button
            type='facebook'
          />
          <Divider/>
          <SocialIcon
            title='Conectar con Google'
            button
            type='google-plus-official'
          />
        </View>

        <Divider style={styles.divider}/>

        {/*Navegador de Tab con Login y Register*/}
        <LoginNavigator/>

      </View>
    );
  }
}

LoginNavigator

export default createMaterialTopTabNavigator(
  {
    Login: {
      screen: LoginComponent,
      navigationOptions: {
        tabBarLabel: 'Iniciar sesión',
        tabBarIcon: ({tintColor}) => (
          <Icon
              name='lock-open'
              color={tintColor}
          />
        )
      }
    },
    Register: {
      screen: RegisterComponent,
      navigationOptions: {
        tabBarLabel: 'Crear cuenta',
        tabBarIcon: ({tintColor}) => (
          <Icon
              name='person-add'
              color={tintColor}
          />
        )
      }
    }
  },
  {
    tabBarPosition: 'top',
    swipeEnabled: true,
    animationEnabled: true,
    tabBarOptions:{
      showIcon: true,

    }
  }
);

LoginComponent

export default class LoginComponent extends Component{

  constructor(props){
    super(props);

    this.state = {
      email: ' ',
      password: ' '
    };
  }

  emailLogin(email, password){
    FirebaseService.firebaseApp.auth().signInWithEmailAndPassword(email, password)
    .then((user) => {
      //AsyncStorage.setItem('userToken', pUser);

      Alert.alert(
        '¡Éxito!',
        'Inicio de sesión exitoso',
        [
          {text: 'OK', onPress: () => console.log('OK Pressed')},
        ]
      );

      this.props.navigation.navigate('App');
    })
    .catch((error) => {
      Alert.alert(
        '¡Ooops, algo salió mal!',
        'Revisa el correo electrónico y/o contraseña.',
        [
          {text: 'OK', onPress: () => console.log(error)},
        ]
      );
    });
  }

  render() {
    return(
      <View style={styles.container}>

        <FormLabel labelStyle={styles.label}>Correo electrónico</FormLabel>
        <FormInput 
          placeholder='ejemplo@nomnom.com'
          onChangeText={(value) => this.setState({email: value})}
        />

        <FormLabel labelStyle={styles.label}>Contraseña</FormLabel>
        <FormInput
          placeholder='contraseña'
          secureTextEntry={true}
          onChangeText={(value) => this.setState({password: value})}
        />

        <Button
          title='Iniciar sesión' 
          icon={{name: 'check'}}
          backgroundColor= 'green'
          buttonStyle={styles.button}
          onPress={this.emailLogin.bind(this, this.state.email, this.state.password)}
        />
      </View>
    );
  }
}

Я использую

"react-native": "0.56.0",
"react-navigation": "^2.17.0"

СпасибоВы очень заранее.

Answer 1

Просто небольшая поправка к предыдущему ответу.Передача будет:

<LoginNavigator screenProps={{switchNavigator: this.props.navigation}}/>

И вызов функции навигации будет:

this.props.screenProps.switchNavigator.navigate ('App');

Answer 2

Когда вы пытаетесь перемещаться внутри своего навигатора входа, у вас есть две определенные опции (экраны): Вход в систему и Регистрация, поэтому navigation.navigate не будет видеть приложение, поскольку оно не определено в текущем навигаторе.В этом случае вы можете сделать «выход» или «перейти назад» к предыдущему навигатору.

Посмотрите на это: https://github.com/react-navigation/react-navigation/issues/697

Также вы можете отправить предыдущий навигатор какScreenProp:

<Login Navigator ScreenProps={{switchNavigator:this.props.navigation}}/>

И внутри вашего компонента Login вместо запуска

this.props.navigation.navigate('App')

вы можете запустить:

this.props.screenProps.navigate('App')