Verwenden Sie globale Variablen in React Native
In diesem Artikel werden wir uns die globalen Variablen ansehen und wie man sie initialisiert und in React Native verwendet.
React Native hat standardmäßig zwei verschiedene Variablen: lokal und global. Während globale Variablen überall und in jeder Aktivität verwendet und von überall geändert werden können, werden lokale Variablen nur innerhalb eines festgelegten Bereichs verwendet.
Globale Bereichsvariablen, die für viele Aktivitäten verwendet werden können, werden von React Native unterstützt. Daher erstellen wir in diesem Tutorial globale Bereichsvariablen in React Native und verwenden sie für viele Aktivitäten.
Verwenden Sie globale Variablen in React Native
Wir müssen den eingebauten Begriff global verwenden, um globale Variablen zu konstruieren. Weitere Informationen finden Sie im folgenden Code.
Syntax:
global.myvar = 'Welcome to Upwork';
Wenn wir eine lokale Variable namens myvar haben, ist sie nur in derselben Klasse verfügbar. Und wenn wir global.myvar haben, wird es global und von jeder Anwendungsklasse aus zugänglich.
Das folgende Beispiel wird Ihnen helfen, es zu verstehen. Eine global.MyVar-Variable, auf die sowohl vom ersten als auch vom zweiten Bildschirm zugegriffen wird, wurde auf dem ersten Bildschirm initialisiert.
Importieren Sie zunächst die react-navigation-Bibliothek in Ihr Projekt, um eine Aktivitätsstruktur zu erstellen, da wir ohne sie viele Aktivitäten in unserem Projekt nicht verwenden können.
npm install --save react-navigation
Öffnen Sie nun mit einem beliebigen Code-Editor App.js und ersetzen Sie den Code durch den folgenden.
Beispielcode (App.js):
import 'react-native-gesture-handler';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import React from 'react';
import FirstPage from './pages/FirstPage';
import SecondPage from './pages/SecondPage';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName='FirstPage'>
<Stack.Screen
name = 'FirstPage'
component={FirstPage}
options={
{
title: 'First Page', headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff', headerTitleStyle: {
fontWeight: 'bold',
},
}}
/>
<Stack.Screen
name="SecondPage"
component={SecondPage}
options={{
title: "Second Page",
headerStyle: {
backgroundColor: "#f4511e",
},
headerTintColor: "#fff",
headerTitleStyle: {
fontWeight: "bold",
},
}}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Der hier verwendete Navigator lässt Sie Komponenten erstellen und hilft bei der Navigation durch verschiedene Komponenten. Es hilft, zwischen den Bildschirmen zu navigieren, da wir ein Element des Bildschirms namens “Erste Seite” haben, das seine Eigenschaften wie Titel, Farbe, Kopfzeilenstil, Schriftart, Schriftstärke usw. hat.
Ebenso wird der zweite Bildschirm als Zweite Seite bezeichnet, mit Eigenschaften wie Titel, Farbe, Kopfzeilenstil, Schriftart, Schriftstärke usw.
Ersetzen Sie den Code in FirstPage.js durch den folgenden Code in einem beliebigen Code-Editor.
import React from 'react';
import {Button, SafeAreaView, Text, View} from 'react-native';
const FirstPage = ({navigation}) => {
global.MyVar = 'Welcome To Upwork';
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 16 }}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 16,
}}
>
Here is the First Page of the App
</Text>
<Text
style={{
fontSize: 18,
textAlign: "center",
marginBottom: 16,
color: "red",
}}
>
Value of Global Variable is: {global.MyVar}
</Text>
<Button
onPress={() => navigation.navigate('SecondPage')}
title='Go to Second Page.'
/>
</View>
</View>
</SafeAreaView>
);
};
export default FirstPage;
Eine globale Variable wird mit dem Schlüsselwort global deklariert. Nachdem wir das Schlüsselwort global verwendet haben, müssen wir seine Variablen dazu bringen, den globalen Wert zu speichern.
Wie man sieht, ist die Variable MyVar global deklariert, die den Wert Welcome To Upwork speichert. Wir müssen es nur einmal initialisieren.
Jetzt können wir diese Variable bei Bedarf auf verschiedenen Seiten verwenden.
Öffnen Sie in einem beliebigen Code-Editor SecondPage.js und ersetzen Sie den Code durch den folgenden.
import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
const SecondPage = () => {
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={{ flex: 1, padding: 16 }}>
<View
style={{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text
style={{
fontSize: 25,
textAlign: 'center',
marginBottom: 16,
}}
>
Here is the Second Page of the App
</Text>
<Text
style={{
fontSize: 18,
textAlign: "center",
marginBottom: 16,
color: "red",
}}
>
Value of Global Variable is: {global.MyVar}
</Text>
</View>
</View>
</SafeAreaView>
);
};
export default SecondPage;
Ausgang:
Im Screenshot sehen Sie den Wert der Variablen und den Button mit dem Namen GO TO SECOND PAGE. Es rendert die erste Seite mit Hilfe eines Navigators auf die zweite Seite.
Hier im Screenshot sehen Sie, dass auch die globale Variable verwendet wird.
Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.
LinkedIn