0
votes

Navigation.navigate: n'a été géré par aucun navigateur

J'utilise la navigation pour la première fois, je crée un formulaire pour inscrire un utilisateur.

Maintenant, une fois que l'utilisateur s'est inscrit, je voudrais rediriger avec la page d'accueil en utilisant les données de l'utilisateur.

J'ai fait de cette manière:

Registration.js

return (
    <NavigationContainer>
   <Stack.Navigator>
        { user ? (
          <Stack.Screen name="Home">
            {props => <HomeScreen {...props} extraData={user} />}
          </Stack.Screen>
        ) : (
          <>
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Registration" component={RegistrationScreen} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
}

App.js

const onRegisterPress = () => {
    if (password !== confirmPassword){
        alert('Error passwords')
        return
    }
    firebase
    .auth()
    .createUserWithEmailAndPassword(email, password)
    .then((response) => {
        const uid = response.user.uid
        const data = {
            id: uid, email, fullName
        };
        const usersRef = firebase.firestore().collection('users')
        usersRef
        .doc(uid)
        .set(data)
        //There:
        .then(() => {
            navigation.navigate("Home",{user: data})
        })
        .catch((error) => {
            alert(error)
        });
    })
    .catch((error) => {
        alert(error)
    })
}

Après l'inscription (qui fonctionne), je reçois le message d'erreur:

L'action 'NAVIGATE' avec la charge utile {"name": "Home", "params": {"user": {"id": "myid", "email": "myemail", "fullName": "myfullname"} }}} n'a été géré par aucun navigateur.

Avez-vous un écran nommé «Accueil»?

Comment puis-je y remédier?

Merci

reactjs react-native react-navigation

0 commentaires

3 Réponses :

1
votes

Éditer

J'ai le sentiment que c'est parce que vous avez deux navigateurs différents. React recherche probablement l'écran d' Home dans le navigateur Auth et ne le trouve pas.

Quand tu fais

<Stack.Screen name="Home" component = {HomeScreen} initialParams={{extraData: user}}>

C'est de l'intérieur .createUserWithEmailAndPassword donc l'objet de navigation fait référence au navigateur d'authentification.

Ce que vous pouvez faire au lieu d'un "navigation.navigate" direct est à la racine de votre code, ayez un if else .

Si connecté retourne Navigator-with-home, sinon renvoie Auth Navigator.

Avoir un setState connecté qui est contrôlé par firebase.auth().onAuthStateChanged . À chaque fois que l'utilisateur est déconnecté, définissezState sur false, à chaque fois que vous êtes connecté, setState sur true. Maintenant, vous changez de navigateur de manière dynamique. React ne sera pas confus.

Exemple d'extrait:

<Stack.Screen name="Home" component = {HomeScreen}>

Réponse précédente:

Pourquoi n'avez-vous pas mis un accessoire de component sur l'écran d'accueil comme vous l'avez fait pour les autres? C'est ainsi que react trouve quel écran servir, non pas par le nom "Home", mais par le component Home.

Tu aurais dû:

    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        this.setState({loggedIn: true});
      } else {
        this.setState({loggedIn: false});
      }
    });

Si vous voulez des paramètres, vous pouvez faire:

navigation.navigate("Home",{user: data})

(Je ne suis pas sûr que vous ayez besoin de crochets autour de {user}. Essayez avec et sans.) Vous pouvez accéder à extraData avec route.params.extraData . La route est transmise automatiquement avec la navigation comme accessoire chaque fois que vous accédez à un écran.

Ainsi, pour les composants basés sur les classes, vous pouvez y accéder avec this.props.route.params.extraData , et pour les this.props.route.params.extraData fonctionnels, vous pouvez faire props.route.params.extraData ou y accéder directement route.params.extraData si vous avez déstructuré il.

5 commentaires

J'ai essayé d'utiliser ce que vous me proposez, mais je reçois la même erreur

Alors vous avez dit que je devrais insérer avant le createUserWithEmailAndPassword votre extrait de createUserWithEmailAndPassword ? et dans le then(() => { }) ?

Mettez l'extrait de code dans votre App.js. Remplacez ensuite {user? (...):(...)} avec {loggedIn? (...):(...)}

Ok, je les ai ajoutés dans mon code. Maintenant, après l'inscription si je reviens, je suis redirigé vers la maison

vous pouvez ajouter un accessoire pour réagir au navigateur qui empêche le retour en arrière gestureEnabled: false

0
votes

Vous n'avez probablement pas importé l'accessoire de navigation de react-navigation.

const registration = () => {
   const navigation = useNavigation();

  const onRegisterPress = () => {
    // handle your Auth here
    navigation.navigate('home');

  }


  return(...whateveryourJsxIs)
}

Puis en composant:

import {useNavigation} from 'react-navigation'

Cela suppose que vous utilisez un composant fonctionnel.

1 commentaires

J'ai importé ceci :)

1
votes

Vous n'avez même pas besoin de naviguer manuellement.
En supposant que l' user dans App.js soit mis à jour lorsque l'utilisateur se connecte, la pile d'authentification sera démontée et la pile d'accueil apparaîtra à la place.

Plus d'informations ici si nécessaire: https://reactnavigation.org/docs/auth-flow

0 commentaires