wake-up-neo.com

Hat React Native einen globalen Geltungsbereich? Wenn nicht, wie kann ich es nachahmen?

Ich konnte nichts dergleichen finden 

$rootScope

für React Native und ich möchte ein paar Variablen zwischen verschiedenen Ansichten teilen. 

14
ksongz

Das Speichern von Variablen im globalen Bereich ist in React ein bisschen ein Anti-Muster. React soll mit einem unidirektionalen Datenfluss verwendet werden. Das bedeutet, dass Daten von Komponenten zu ihren untergeordneten Elementen hinunterfließen. Dies wird durch die Weitergabe von Requisiten erreicht.

Um einen Wert zwischen mehreren Ansichten gemeinsam zu nutzen, müssen Sie entweder die Daten in einer gemeinsam genutzten übergeordneten Komponente speichern und als prop OR in einer separaten Entität weitergeben, die für die Datenverwaltung zuständig ist. In ReactJS wird dies durch Muster wie Flux erreicht, aber ich bin mir nicht sicher, welche Optionen für das Reaktivnative gelten.

5
Jakemmarsh

Der globale Bereich in React Native ist variabel global.

global.foo = foo 

Dann können Sie global.foo überall verwenden.

Aber missbrauche es nicht! Meiner Meinung nach kann der globale Bereich verwendet werden, um die globale Konfiguration oder ähnliches zu speichern. Teilen Sie Variablen zwischen verschiedenen Ansichten. Als Beschreibung können Sie viele andere Lösungen auswählen (verwenden Sie Redux, Fluss oder speichern Sie sie in einer höheren Komponente). 

Bei der Definition einer globalen Variablen empfiehlt es sich, eine js-Datei zu verwenden. Zum Beispiel global.js:

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

Dann stellen Sie sicher, dass es bei der Initialisierung des Projekts ausgeführt wird. Importieren Sie die Datei beispielsweise in index.js:

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

Jetzt können Sie die globale Variable überall verwenden, und Sie müssen global.js nicht in jede Datei importieren. Versuche sie nicht zu verändern!

28
Germinate

Sie können beispielsweise Klassen mit statischen Eigenschaften exportieren und diese bei Bedarf importieren.

In main.js zum Beispiel:

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

In einer anderen Datei, wo diese Farben benötigt werden

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

Schritt 1. Erstellen Sie ConstantFile.js File und geben Sie diesen Code ein.

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

Schritt 2. Greifen Sie wie folgt zu. Aber vorher müssen Sie import Ihre js-Datei in eine bestimmte Klassendatei bringen

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

ConstantClass.webserviceName

ConstantClass.Email

ConstantClass.Passoword
2
kalpesh

Sie können diese Werte im Status der übergeordneten Komponenten speichern. Übergeben Sie dann Methoden, die diese Werte ändern, über Requisiten oder Kontext/oder wie von @Jakemmarsh vorgeschlagen - verwenden Sie den Ansatz Flux / Redux

ODER Sie können AsyncStorage verwenden. Es ist nützlich, um App-Daten wie Token und dergleichen zu speichern.

0
adamTrz