react-native - Navigation.navigate 不会去任何地方

Question

我遵循的是身份验证流程 (https://reactnavigation.org/docs/en/auth-flow.html) 上的 React 导航指南，但略有不同。我在 LoginScreen 中嵌套了一个选项卡导航器。我不确定为什么，因为我真的是 React Native 的新手，但登录功能中的所有内容似乎都可以正常工作，除了应该移至主导航器的部分。

这是我的基本身份验证流程:

基本上我想做的是从绿色变为红色，但是在

navigation.navigate('App');

这是我的导航器文件:

授权导航器

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

登录导航器

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,

    }
  }
);

登录组件

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

当您尝试在您的登录导航器中导航时，您有两个已定义的选项(屏幕):登录和注册，因此 navigation.navigate 不会“看到”应用程序，因为它未在中定义当前的导航器。在这种情况下，您可以做的是“退出”或“返回”到上一个导航器。

看看这个: https://github.com/react-navigation/react-navigation/issues/697

此外，您可以将上一个导航器作为 ScreenProp 发送:

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

在你的登录组件中，而不是运行

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

你可以运行:

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