Navigation.navigate 哪儿也不去答案

【问题标题】：Navigation.navigate not going anywhereNavigation.navigate 哪儿也不去
【发布时间】：2018-10-09 20:58:52
【问题描述】：

我遵循了关于身份验证流程 (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>
    );
  }
}

登录导航器

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"

非常感谢您。

【问题讨论】：

标签： react-native react-navigation

【解决方案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')

【讨论】：

【解决方案2】：

只是对上一个答案的一个小修正。传递将是：

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

导航功能的调用是：

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

【讨论】：