passer des paramètres entre deux piles - React Native

Question

Mon application devrait avoir un écran de connexion, avec Google, de sorte qu'une fois connecté, l'écran de menu s'affiche.

afin de ne pas revenir à l'écran de connexion lorsque l'on appuie sur le bouton retour, après avoir accédé à l'écran de menu après l'authentification. J'ai séparé les piles, une pour l'écran de connexion et une pour les autres écrans.

dans App.js :

const AuthStack = createStackNavigator({
  LoginSplashScreen: LoginSplashScreen 
});
const AppStack = createStackNavigator({ 
  MenuScreen:MenuScreen,
  DetailsScreen: DetailsScreen,
  PhotoScreen: PhotoScreen,
  DocumentScreen: DocumentScreen,
  AudioScreen: AudioScreen,
  ScheduleScreen: ScheduleScreen,
  SettingsScreen: SettingsScreen,
  FilesScreen: FilesScreen,
  GalleryScreen: GalleryScreen
   });

const Root= createAppContainer(createSwitchNavigator(
  {
    AuthStack:AuthStack,
    AppStack:AppStack
  },
  {
    initialRouteName: 'AuthStack',
  }
));

export default class App extends React.Component {
  render() {
    return (
      <Root/>  
    )
  }
}

donc dans le LoginSplashScreen après l'authentification, j'ai utilisé ce code pour naviguer :

    this.props.navigation.navigate('AppStack', {
      signedIn: true,
      name: result.user.name,
      photoUrl: result.user.photoUrl
    });

la navigation fonctionne bien, mais les paramètres 'name', 'signedIn', 'photoUrl' ne passent pas en fait, lors de l'alerte

    Alert.alert('',JSON.stringify(this.props.navigation.state.params))

sur l'écran de menu (deuxième pile), il est vide

Qu'est-ce que je fais de travers ?

pourquoi mes paramètres ne passent pas ? parce que je pourrais avoir besoin d'un autre tiroir de navigation .

Existe-t-il un moyen de définir des paramètres globaux pour tous les écrans de l'application ?

Existe-t-il un meilleur moyen d'éviter d'appuyer sur la touche retour de l'écran de menu et de ne pas obtenir l'écran de connexion ?

EDIT :

J'ai réussi à résoudre ce problème spécifique en définissant un paramètre global avec :

global.param= result.param;

Mais j'ai toujours besoin d'une réponse pour passer entre deux piles séparées.

Answer 1

En créant deux piles séparées, vous avez en quelque sorte détaché le champ params, ce que vous essayez de faire est : envoyer des params en utilisant un champ de navigation différent à un champ de navigation complètement différent qui en fait n'est pas du tout au courant du précédent bien qu'il vive dans un parent commun.

Lorsque vous utilisez this.props.navigation de LoginSplashScreen vous êtes en fait dans un champ de navigation en bac à sable de votre AuthStack qui se limite aux itinéraires de son propre navigateur. Maintenant, lorsque vous liez vos deux piles dans un seul navigateur en tant que Routes du SwitchNavigator, vous entrez dans la portée d'un navigateur parent qui donne sa propre prop de navigation, donc si vous aviez utilisé la fonction navigation du navigateur switch, vous auriez alors obtenu les paramètres dans votre AppStack mais puisque.

Ce que je suggère, ce sont les trois façons suivantes de le faire correctement :

1. Utilisation de l'écran de connexion comme route directe pour le SwitchNavigator, supprimant ainsi le navigateur de pile inutile pour la connexion, ce qui détache le routage.

Le code devrait ressembler à ceci :

const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen 
   AppStack:AppStack
}, {
initialRouteName: 'LoginSplashScreen',
}));

2. L'utilisation de redux pour stocker des données dans un magasin accessible à tous et leur utilisation sur les différents composants comme décrit dans l'autre réponse, mais ce n'est pas une raison pour utiliser redux en premier lieu.

3. Utiliser un Nouveau Composant à la place d'AppStack dans le navigateur de switch tout en ayant LoginSplashScreen comme l'une des voies directes de SwitchNavigator et de l'équarrissage. AppStack à l'intérieur du Nouveau Composant et en transmettant l'information reçue à l'adresse params como screenProps dans le AppStack il suffit alors d'utiliser les screenProps dans les itinéraires de la pile.

Le code devrait ressembler à ceci :

 const Root= createAppContainer(createSwitchNavigator({
   LoginSplashScreen: LoginSplashScreen, 
   MyMediatorScreen: MyFancyComponent
}, {
initialRouteName: 'AuthStack',
}));

Par exemple, le FancyComponent sera comme ci-dessous :

class MyFancyComponent extends React.Component{
   constructor (props){
      super (props); 
   }

   render () {
     const {params} = this.props.navigation.state;
     return (
        <AppStack screenProps = {params} />
     )
   }
}

Answer 2

Dans certains cas où vous ne voulez pas séparer vos piles pour des raisons de séparation des préoccupations ou autres, comme dans votre cas, ce que vous pourriez faire ici est de passer les paramètres à travers des navigateurs imbriqués, comme indiqué dans la documentation sur les navigateurs react ici Docs React Navigator

Dans votre cas, j'enverrais les paramètres comme suit :

this.props.navigation.navigate('AppStack', { screen: 'MenuScreen', params: { signedIn: true, name: result.user.name, photoUrl: result.user.photoUrl }, });

J'espère que cela aidera quelqu'un à l'avenir. J'ai testé cela car j'ai une application exacte.

Answer 3

D'après ce que je peux voir dans votre code, tout semble aller bien, il se peut que vous fassiez une chaîne JSON, essayez peut-être d'obtenir chaque paramètre séparément, c'est-à-dire this.props.navigation.getParam('signedIn', false);

Pour un flux d'authentification utilisant react-navigation vous devez suivre ce guide : https://reactnavigation.org/docs/en/auth-flow.html De cette façon, vous n'aurez pas à revenir sur le bouton de retour une fois que vous vous serez connecté.

Pour stocker des données telles que la réponse d'authentification que vous recevez de Google, je recommanderais d'utiliser AsyncStorage ou une autre forme de bibliothèque de stockage telle que react-redux . Il s'agit d'un exemple très simple qui utilise react-redux : https://medium.com/@aurelie.lebec/redux-and-react-native-simple-login-example-flow-c4874cf91dde .

Je recommanderais personnellement un système de stockage, car l'ensemble de votre application peut avoir accès à la base de données. auth plutôt que de l'envoyer constamment sous forme de paramètres.