web-dev-qa-db-fra.com

Passer des données entre les pages en React native

Im nouveau pour réagir natif et je suis coincé à suivre.

J'effectue la navigation (lorsque vous cliquez sur le bouton d'affichage des alertes) en utilisant le code ci-dessous.

const {navigation} = this.props.navigation;
…
.
.
 { text: 'Done', onPress:() => {
              navigate.Push(HomeScreen);}

Comment puis-je transmettre des données à une autre page en React native? Puis-je déclarer le paramètre global et simplement l'affecter?

Quelle serait la bonne façon de procéder et comment procéder?

react-nativenavigation
8
Saranjith

Passage de données entre les pages dans react-navigation est assez simple. C'est clairement expliqué dans la documentation ici

Pour être complet, créons une petite application qui nous permet de naviguer d'un écran à un autre en passant des valeurs entre les écrans. Nous allons simplement passer des chaînes dans cet exemple mais il serait possible de passer des nombres, des objets et des tableaux.

App.js

import React, {Component} from 'react';
import AppContainer from './MainNavigation';
export default class App extends React.Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

MainNavigation.js

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import { createStackNavigator, createAppContainer } from 'react-navigation';

const screens = {
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  }
}

const config = {
  headerMode: 'none',
  initialRouteName: 'Screen1'
}

const MainNavigator = createStackNavigator(screens,config);
export default createAppContainer(MainNavigator);

Screen1.js et Screen2.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Ici, nous avons 4 fichiers. Le App.js dont nous importerons le MainNavigation.js. Le MainNavigation.js configure un StackNavigator avec deux écrans, Screen1.js et Screen2.js. Screen1 a été défini comme écran initial pour notre StackNavigator.

Navigation entre les écrans

Nous pouvons naviguer à partir de Screen1 à Screen2 en utilisant

this.props.navigation.navigate('Screen2');

et nous pouvons revenir à Screen1 de Screen2 en utilisant

this.props.navigation.goBack();

Donc, codez dans Screen1 devient

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go to screen 2'} onPress={() => this.props.navigation.navigate('Screen2')} />
      </View>
    )
  }
}

Et codez dans Screen2 devient:

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title={'Go back'} onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

Maintenant, nous pouvons naviguer entre Screen1 et Screen2

Envoi de valeurs à partir de Screen1 à Screen2

Pour envoyer une valeur entre Screen1 et Screen2, deux étapes sont impliquées. Nous devons d'abord l'envoyer, ensuite nous devons le capturer.

Nous pouvons envoyer une valeur en la passant comme second paramètre. Remarquez comment la valeur du texte est contenue dans un objet.

this.props.navigation.navigate('Screen2', {text: 'Hello from Screen 1' });

Et nous pouvons le capturer dans Screen2 en procédant comme suit, la première valeur dans getParams est la key la deuxième valeur est la valeur par défaut.

const text = this.props.navigation.getParams('text','nothing sent');

Donc Screen1 devient maintenant

export default class Screen extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Button 
         title={'Go to screen 2'} 
         onPress={() => this.props.navigation.navigate('Screen2',  { 
           text: 'Hello from screen 1' 
         })} />
      </View>
    )
  }
}

Et codez dans Screen2 devient:

export default class Screen extends React.Component {
  render() {
    const text =  this.props.navigation.getParam('text', 'nothing sent')
    return (
      <View style={styles.container}>
        <Text>{text}</Text>
        <Button 
         title={'Go back'} 
         onPress={() => this.props.navigation.goBack()} />
      </View>
    )
  }
}

Envoi de valeurs à partir de Screen2 retour à Screen1

Le moyen le plus simple que j'ai découvert pour envoyer une valeur à partir de Screen2 à Screen1 consiste à passer une fonction à Screen2 de Screen1 qui mettra à jour l'état dans Screen1 avec la valeur que vous souhaitez envoyer

Nous pouvons donc mettre à jour Screen1 pour ressembler à ceci. D'abord, nous définissons une valeur initiale dans l'état. Ensuite, nous créons une fonction qui mettra à jour l'état. Ensuite, nous passons cette fonction comme paramètre. Nous afficherons la valeur capturée à partir de Screen2 dans un composant Text.

export default class Screen1 extends React.Component {

  state = {
    value: ''
  }

  receivedValue = (value) => {
    this.setState({value})
  }

  render() {
    return (
      <View style={styles.container}>
        <Button 
          title={'Go to screen 2'} 
          onPress={() => this.props.navigation.navigate('Screen2', {
            text: 'Hello from Screen 1', 
            receivedValue: this.receivedValue } 
            )} />
          <Text>{this.state.value}</Text>
      </View>
    )
  }
}

Notez que nous transmettons la fonction receivedValue de la même manière que nous avons passé la text plus tôt.

Maintenant, nous devons capturer la valeur dans Screen2 et nous le faisons de manière très similaire à ce que nous avons fait précédemment. Nous utilisons getParam pour obtenir la valeur, sans oublier de définir notre valeur par défaut. Ensuite, lorsque nous appuyons sur notre bouton Revenir en arrière , nous le mettons à jour pour appeler la fonction receivedValue en premier, en passant le texte que nous voulons envoyer retour.

export default class Screen2 extends React.Component {

  render () {
    const text =  this.props.navigation.getParam('text', 'nothing sent');
    const receivedValue = this.props.navigation.getParam('receivedValue', () => {});
    return (
      <View style={styles.container}>
        <Button 
          title={'Go back'} 
          onPress={() => {
            receivedValue('Hello from screen 2')
            this.props.navigation.goBack()
          }} />
          <Text>{text}</Text>
      </View>
    );
  }
}

Alternatives à l'utilisation de getParam

Il est possible de ne pas utiliser la méthode getParam et d'accéder directement aux valeurs. Si nous le faisions, nous n'aurions pas la possibilité de définir une valeur par défaut. Mais cela peut être fait.

Dans Screen2 nous aurions pu faire ce qui suit:

const text = this.props.navigation.state.params.text;
const receivedValue = this.props.navigation.state.params.receivedValue;

Capture de valeurs dans des événements de cycle de vie (Screen1 à Screen2)

react-navigation vous permet de capturer des valeurs à l'aide des événements du cycle de vie. Il y a plusieurs façons de procéder. Nous pourrions utiliser NavigationEvents ou nous pourrions utiliser des écouteurs définis dans le componentDidMount

Voici comment le configurer à l'aide de NavigationEvents

import React, {Component} from 'react';
import { View, StyleSheet, Text } from 'react-native';
import { NavigationEvents } from 'react-navigation'; // you must import this


export default class Screen2 extends React.Component {

    state = {
      text: 'nothing passed'
    }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }


  render() {
    return (
      <View style={styles.container}>
        <NavigationEvents
        onWillFocus={this.willFocusAction}

        />
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

Voici comment le faire en utilisant des écouteurs dans le componentDidMount

export default class Screen2 extends React.Component {

  componentDidMount () {
    // we add the listener here
    this.willFocusSubscription = this.props.navigation.addListener('willFocus', this.willFocusAction);
  }

  componentWillUmount () {
    // we remove the listener here
    this.willFocusSubscription.remove()
  }

  state = {
    text: 'nothing passed'
  }

  willFocusAction = (payload) => {
    let params = payload.state.params;
    if (params && params.value) {
      this.setState({value: params.value});
    }
  }

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 2</Text>
        <Text>{this.state.text}</Text>
      </View>
    )
  }
}

Passer la navigation via les composants

Dans les exemples ci-dessus, nous avons transmis des valeurs d'écran à écran. Parfois, nous avons un composant à l'écran et nous souhaitons peut-être naviguer à partir de cela. Tant que le composant est utilisé dans un écran qui fait partie d'un navigateur, nous pouvons le faire.

Si nous partons de notre modèle initial et construisons deux boutons. L'un sera un composant fonctionnel, l'autre un composant React.

MyButton.js

// this is a functional component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export const MyButton = ({navigation, value, title}) => {
  return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
  )
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red'
  }
});

MyOtherButton.js

// this is a React component
import React, {Component} from 'react';
import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';

export default class MyOtherButton extends React.Component {

  render() {
    const { navigation, value, title } = this.props; 
    return (
    <TouchableOpacity onPress={() => navigation.navigate('Screen2', { value })}>
      <View style={styles.buttonStyle}>
        <Text>{title}</Text>
      </View>
    </TouchableOpacity>
    )
  }
}

const styles = StyleSheet.create({
  buttonStyle: {
    width: 200,
    height: 60,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'yellow'
  }
});

Quel que soit le type de composant, notez que la navigation est un accessoire. Nous devons passer la navigation au composant sinon il ne fonctionnera pas.

Screen1.js

import React, {Component} from 'react';
import { View, StyleSheet, Text, Button } from 'react-native';
import { MyButton } from './MyButton';        
import MyOtherButton from './MyOtherButton';  

export default class Screen1 extends React.Component {

  render() {
    return (
      <View style={styles.container}>
        <Text>Screen 1</Text>
        <MyButton 
          title={'Press my button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyButton'}
        />
        <MyOtherButton 
          title={'Press my other button'} 
          navigation={this.props.navigation}
          value={'this is a string passed using MyOtherButton'}
        />
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  }
});

Remarquez dans Screen1.js comme il est contenu dans un StackNavigator, il aura accès à this.props.navigation. Nous pouvons transmettre cela à notre composant comme accessoire. Tant que nous l'utilisons dans notre composant, nous devrions pouvoir naviguer en utilisant les fonctionnalités propres aux composants.

<MyButton 
  title={'Press my button'} 
  navigation={this.props.navigation} // pass the navigation here
  value={'this is a string passed using MyButton'} 
/>

Collations

10
Andrew

1) Sur l'écran d'accueil: -

Initialiser: -

constructor(props) {
    super(props);
    this.navigate = this.props.navigation.navigate; }

Envoyer: -

this.navigate("DetailScreen", {
            name: "Detail Screen",
            about:"This is Details Screen Page"
          });

2) Sur l'écran de détail: -

Initialiser: -

constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
}

Données retrive: -

console.log(this.params.name);
console.log(this.params.about);
7
omprakash8080
const {navigate} = this.props.navigation;

…
.
.
 { text: 'Done', onPress:() => {
              navigate('homeScreen',...params);}

Vous pouvez obtenir ces paramètres comme

const {params} = this.props.navigation.state
4
Manzoor Samad

Vous pouvez facilement envoyer et recevoir vos paramètres avec react-navigation comme ci-dessous

Envoyer les paramètres :

{
   text: 'Done',
   onPress: () => {
       this.props.navigation.navigate(
           HomeScreen,
           {param1: 'value1', param2: 'value2'}
       );
   }
}

Récupère les paramètres dans HomeScreen:

const { navigation } = this.props;
var param1 = navigation.getParam('param1', 'NO-VALUE');
var param2 = navigation.getParam('param2', 'NO-VALUE');

les 'NO-VALUE' est la valeur par défaut, s'il n'y a pas de paramètre souhaité

3
SiSa

Je suppose que vous utilisez React-Navigation. Ainsi, dans React-Navigation, nous pouvons transmettre des données en deux parties:

  1. Passez des paramètres à un itinéraire en les plaçant dans un objet comme deuxième paramètre de la fonction navigation.navigate:

    this.props.navigation.navigate('RouteName', { /* params go here */ })

  2. Lisez les paramètres de votre composant d'écran:

    this.props.navigation.getParam(paramName, someDefaultValue)

    Bouton d'alerte

        <Button
      title="Alert View"
      onPress={() => {
        this.props.navigation.navigate('alerts', {
          itemId: 86,
          otherParam: 'anything you want here',
        });
      }}
    />

Écran:

const itemId = navigation.getParam('itemId', 'NO-ID');
const otherParam = navigation.getParam('otherParam', 'some default value')
3
Prathmesh Kadam