Valeur de passage entre le composant dans le navigateur natif React

Je configurerais votre navigateur comme cet exemple . Essentiellement, placez le navigateur dans votre scène d'index et faites y importer tous les composants nécessaires. Ensuite, définissez une fonction renderScene() pour gérer toutes les routes en fonction d'un nom (ou d'un id, comme vous l'avez fait). Je n'utiliserais pas l'objet component comme la chose elle-même qui est transmise de l'appel à la méthode Push du navigateur car si vous faites cela, vous devrez importer le composant dans cette vue spécifique. J'ai l'habitude de le faire et a couru dans de nombreux problèmes, donc je vous préviens juste si vous rencontrez des problèmes, considérez cette approche.

  renderScene(route, navigator) {

    if(route.name == 'root') {
      return <Root navigator={navigator} />
    }
    if(route.name == 'register') {
      return <Register navigator={navigator} />
    }
    if(route.name == 'login') {
      return <Login navigator={navigator} />
    }
    if(route.name == 'home') {
      return <Home navigator={navigator} {...route.passProps} />
    }
    if(route.name == 'update') {
      return <Update navigator={navigator} {...route.passProps} />
    }

  }

Parfois, le pass prop ne fonctionne pas (du moins pour moi) donc ce que je fais est de le passer dans l'objet route lui-même

nav.push({
        id: 'MainPage',
        name: 'LALA',
        token: tok
      });

Donc, pour y accéder dans la scène suivante, j'utilise

var token = this.props.navigator.navigationContext.currentRoute.token;

Bien qu'un "accès" compliqué mais infaillible, les accessoires pass puissent fonctionner ou non de cette façon, vous pouvez passer les propriétés de l'objet route lui-même, vous évitant ainsi les tracas de l'envoyer d'une manière différente.

Ce n'est peut-être pas la bonne façon, mais je la trouve un peu plus pratique.

Si vous utilisez réagir indigènes de la navigation, il suffit d'ajouter passProps votre params objet, selon documentation.

Par exemple.:

this.props.navigator.push({
  screen: 'example.Screen',
  title: 'Screen Title',
  passProps: {
    id: 'MainPage',
    name: 'mainPage'
  }
})

Vous pouvez également passer des paramètres à sceneA à sceneB en utilisant la manière suivante. Supposons que _handlePressOnClick() est écrit sur un clic de bouton dans L'écran SceneA.

_handlePressOnClick(){ //this can be anything
 this.props.navigator.push({
    name: "sceneB", //this is the name which you have defined in _renderScene
    otherData: {
      dataA: "data1"
    }
 })
}

Ensuite défini des données dans votre _renderScene où vous avez implémenté votre navigateur comme ceci

_renderScene(route, navigator) {        
    switch(route.name) {
        case "sceneA":
            return (
                <sceneA navigator={navigator} />
            );
        break;
        case "sceneB":
            return (
                <sceneB navigator={navigator} otherData={route.otherData}/>
            );
        break;
  }

N'oubliez pas d'importer vos fichiers de vues comme ceci

import sceneA from './sceneA';
import sceneB from './sceneB';

Maintenant, dans le fichier sceneB, vous pouvez accéder à votre otherData de la manière suivante

var {dataA} = this.props.otherData;

or

constructor(props){
  super(props);
  this.state={
     otherData: this.props.otherData
  }
}

Ensuite, dans votre méthode render (), vous pouvez accéder à otherData à l'aide de l'état.

<Text>{this.state.otherData.dataA}</Text>

Vous pouvez également utiliser pour maintenir l'état de niveau global en utilisant redux qui est accessible via action et props automatiquement.

1.Lors du passage des données de la scène A à la scène B, vous devez spécifier dans la balise navigator que vous transmettez également les données avec route. ex.

if(route.name == 'home') {
      return <Home navigator={navigator} data={route.data} />
    }

Envoyer des données de la scène A ex.this.props.navigator.push({name:'sceneB',data:{name:this.state.name},});

Dans la scène B accéder aux données comme ceci ex. this.props.data.name et vous obtenez les données de la scène A à la scène B