Dev Faq
0
votes

Empêcher l'utilisateur de revenir à l'écran de connexion après la connexion avec succès dans React Native

J'ai 3 écrans. A => Connexion, B => Dashboard, C => Profil.

Initialement lorsque l'utilisateur n'est pas connecté, l'écran de connexion Renders. Après la connexion, j'ai utilisé Asyncstorage pour enregistrer l'userid (que je reçois de la réponse de l'API). Si l'utilisateur est déjà connecté et ouvre l'application, j'ai redirigé l'utilisateur à la page de tableau de bord.

Ce sont les problèmes que je suis confronté à ma mise en œuvre du code.

  1. Après vous connecter, si l'utilisateur appuie sur la touche Retour de la page de tableau de bord (Andriode), il navigue dans l'écran de connexion. et cette méthode du composant de la TimeDidDidDidMount () ne s'appelle pas, je ne suis donc pas en mesure de mettre un chèque si l'utilisateur est venu de l'écran de tableau de bord.
  2. J'ai essayé d'enregistrer l'événement de Backhandler sur la méthode du composant de Dashboard () avec condition => Si l'utilisateur appuyez sur le bouton arrière, l'application quitte, mais je suis en mesure de supprimer cet événement sur le même écran, alors si je vais Pour profiler l'écran du tableau de bord et de la page de profil si j'appuyez sur Backbutton, l'application quitte.

    Tout ce que je veux réaliser est, après la connexion, jusqu'à ce que l'utilisateur appuie sur le bouton de déconnexion, l'utilisateur ne doit pas être capable d'aller à l'écran de connexion.

1 commentaires

Dupliqué possible de réact de la manutention du bouton Native - Device de l'appareil

4 Réponses :

1
votes

Vous devez réinitialiser votre historique de navigation pour faire cela

Ceci est un extrait d'un de mon projet où je devrais faire la même chose: P> 

this.props.navigation.reset([NavigationActions.navigate({ routeName: 'DevicesList'})], 0);

0 commentaires
0
votes

Pour cela, je suggérerais d'utiliser un Switchnavigator (si vous utilisez réacteur-navigation). Cela laissera l'écran précédent (dans ce cas de votre Loginscreen ) démonter et que vous ne pourrez pas goback à cet écran, à moins que votre expliciteur ne le dise à naviguer à l'écran.

Si non , vous pouvez toujours utiliser votre backhandling personnalisé dans votre écran de tableau de bord et utiliser le React-Navigaton avec Navigègefocus hoc.

Le composant ComposantDidMount restera le même que votre première tentative. Vous auriez besoin d'utiliser composentDidUpdate et de vérifier le iSfocusd prop, comme: xxx

laissez-moi savoir si vous ont un problème avec l'une des solutions

0 commentaires
1
votes

Vous pouvez simplement y parvenir en utilisant le navigateur de commutation au lieu d'un navigateur de pile lors de la navigation de «écran de connexion» à «Dashboard». 

const MainStack = createStackNavigator({
    DashboardScreen: Dashboard,
    ProfileScreen: Profile
});

export default createAppContainer(createSwitchNavigator({
  LoginScreen: Login,
  Main: MainStack
}));

0 commentaires
0
votes

Réagir de la navigation V5 Documentation couvre ce cas d'utilisation. Lien de documentation

0 commentaires

Articles qui pourrait vous intéresser :

jest test échoue après l'installation de react-native-async-storage
Impossible de charger le script Assurez-vous que vous exécutez un serveur Metro ou que votre bundle 'index.android.bundle' est correctement emballé pour la publication
L'action POP avec charge utile n'a été gérée par aucun navigateur
React n'est pas défini dans le module Shopify