Ich habe nicht in der Lage, etwas zu finden, wieHat React Native globalen Geltungsbereich? Wenn nicht, wie kann ich es nachahmen?
$rootScope
für Native Reagieren und ich möchte ein paar Variablen zwischen verschiedenen Ansichten teilen.
Das Speichern von Variablen im globalen Bereich ist in React ein bisschen ein Anti-Pattern. React soll mit einem Einweg-Datenfluss verwendet werden, dh Daten fließen von Komponenten zu ihren untergeordneten Elementen. Dies wird erreicht durch .
Um einen Wert zwischen mehreren Ansichten zu teilen, müssten Sie entweder die Daten in einer gemeinsamen übergeordneten Komponente speichern und als prop OR übergeben oder in einer separaten Entität speichern, die für die Datenverwaltung zuständig ist. In ReactJS wird dies durch Muster wie Flux erreicht, aber ich bin mir nicht sicher über die Optionen für react-native.
Zum Beispiel können Sie Klassen mit statischen Eigenschaften exportieren und dann bei Bedarf importieren.
In main.js zum Beispiel:
export class AppColors {
static colors = {main_color: "#FFEB3B", secondary_color: "#FFC107"}
}
In anderer Datei, in denen diese Farben
import { AppColors } from './main.js';
class AnotherPage {
constructor() {
super();
console.log(AppColors.colors); // youla! You will see your main and secondary colors :)
}
}
Können Sie statische Methoden oder Funktionen in AppColors hinzufügen und deren Verwendung? – YLS
Die globale Reichweite erhalten müssen in React india Variable global ist.
global.foo = foo
Dann können Sie global.foo überall verwenden.
Aber missbrauchen Sie es nicht! Meiner Meinung nach kann der globale Bereich verwendet werden, um die globale Konfiguration oder etwas ähnliches zu speichern. Teilen Sie Variablen zwischen verschiedenen Sichten, als Ihre Beschreibung können Sie viele andere Lösungen wählen (verwenden Sie redux, flux oder speichern Sie sie in einer höheren Komponente), globaler Geltungsbereich ist keine gute Wahl.
Eine gute Methode zum Definieren globaler Variablen ist die Verwendung einer js-Datei. Zum Beispiel global.js:
global.foo = foo;
global.bar = bar;
Dann, um sicherzustellen, dass es ausgeführt wird, wenn Projekt initialisiert. Zum Beispiel importieren Sie die Datei in index.js:
import './global.js'
// other code
Nun Sie die globale Variable überall verwenden können, und brauchen nicht global.js in jeder Datei zu importieren. Versuchen Sie nicht, sie zu ändern!
Danke, dass ich darauf hingewiesen habe, dass ich auf einige Konfigurations-Globals von meinen Reaktionscontainern sowie von Diensten zugreifen wollte, und dies half. Allerdings musste ich global.js nicht importieren. Ich könnte einfach global.foo = foo –
verwenden. Meiner Meinung nach sollte die globale Variable nicht geändert werden, während die App läuft. Wenn Sie also in einer Komponente oder einem Logikcode global.foo = foo schreiben, wenn Sie foo verwenden möchten, sind Sie nicht sicher, ob es zuvor initialisiert wurde. Oder vielleicht wird jemand foo in anderem Code neu zuweisen. In global.js ist der Wert aller globalen Variablen eindeutig. Importieren Sie es in die index.js, um sicherzustellen, dass alle globalen Variablen definiert sind, und Sie können sie überall verwenden! – Germinate
Kann dies für globale Funktionen verwendet werden? – fungusanthrax
Sie können diese Werte im Status der übergeordneten Komponenten speichern. Dann übergeben Methoden, die diese Werte über Requisiten oder Kontext/oder wie @Jakemmarsh vorgeschlagen - verwenden Flux/Redux Ansatz.
ODER, Sie können AsyncStorage verwenden. Es ist nützlich zum Speichern von App-Daten wie Token und so.
Fluss- und Redux-Links sind gebrochen ... –
Stimmen Sie zu, dass dies in der Regel ein Antipattern ist, aber das bedeutet nicht, dass Sie niemals Globals unter allen Umständen verwenden sollten. React Native selbst definiert eine globale Variable in Javascript namens '__DEV__'. Wie wird das gemacht und wie kann ich etwas Ähnliches erzeugen, z.B. '__MYDEV__'?(Es sieht so aus, als ob dies nicht möglich ist, und dass das, was am nächsten kommt, eine [Umgebungsvariable] ist (http://stackoverflow.com/questions/33117227/setting-environment-variable-in-react-native).) –