web-dev-qa-db-fra.com

React Native a-t-il une portée globale? Si non, comment puis-je l'imiter?

Je n'ai pas pu trouver quoi que ce soit comme 

$rootScope

pour React Native et je veux partager quelques variables entre différentes vues. 

javascriptreactjsreact-native
14
ksongz

Stocker des variables dans la portée globale est un peu un anti-modèle dans React. React est destiné à être utilisé avec un flux de données à sens unique, ce qui signifie que les données sont transférées des composants à leurs enfants. Ceci est réalisé par le passage d'accessoires .

Afin de partager une valeur entre plusieurs vues, vous devez stocker les données sur un composant parent partagé et les transmettre sous la forme d'un magasin prop OR dans une entité distincte responsable de la gestion des données. Dans ReactJS, ceci est réalisé grâce à des modèles tels que Flux , mais je ne suis pas sûr des options pour réagir en natif.

5
Jakemmarsh

La portée globale dans React Native est une variable globale.

global.foo = foo 

Ensuite, vous pouvez utiliser global.foo n'importe où.

Mais ne pas en abuser! À mon avis, la portée globale peut être utilisée pour stocker la configuration globale ou quelque chose comme ça. Partagez des variables entre différentes vues. Comme description, vous pouvez choisir de nombreuses autres solutions (utilisez redux, flux ou les stocker dans un composant supérieur). La portée globale n'est pas un bon choix. 

Une bonne pratique pour définir une variable globale consiste à utiliser un fichier js. Par exemple global.js:

global.foo = foo;
global.bar = bar;

Ensuite, pour vous assurer qu'il est exécuté lors de l'initialisation du projet. Par exemple, importez le fichier dans index.js:

import './global.js'
// other code

Maintenant, vous pouvez utiliser la variable globale n'importe où et vous n'avez pas besoin d'importer global.js dans chaque fichier. Essayez de ne pas les modifier!

28
Germinate

Par exemple, vous pouvez exporter une classe avec des propriétés statiques puis y importer quand vous en avez besoin.

Dans main.js par exemple:

export class AppColors {
    static colors = {main_color: "#FFEB3B", secondary_color: "#FFC107"}
}

Dans un autre fichier, où besoin d'obtenir ces couleurs

import { AppColors } from './main.js';

class AnotherPage {
    constructor() {
        super();
        console.log(AppColors.colors); // youla! You will see your main and secondary colors :)
    }
}
7
Egor Medvedev

Étape 1. Créez le fichier ConstantFile.js et mettez ce code.

export class ConstantClass {
    static webserviceName = 'http://172.104.180.157/epadwstest/';
    static Email = 'emailid';
    static Passoword = 'password';
}

Étape 2. Accédez comme ci-dessous. Mais avant cela, vous devez import votre fichier js dans un fichier de classe particulier, quelque chose comme ça

import { ConstantClass } from './MyJS/ConstantFile.js';

ConstantClass.webserviceName

ConstantClass.Email

ConstantClass.Passoword
2
kalpesh

Vous pouvez stocker ces valeurs dans l'état des composants parents. Puis passez les méthodes qui changent ces valeurs via props ou context/ou comme @Jakemmarsh le suggère - utilisez Flux / Redux

OU, vous pouvez utiliser AsyncStorage . Son utile pour stocker des données d'application comme les jetons et autres.

0
adamTrz