React Native でグローバル変数を使用する
この記事では、グローバル変数と、それらを初期化して React Native で使用する方法について説明します。
React Native には、デフォルトでローカルとグローバルの 2つの異なる変数があります。 グローバル変数はどこでも、どのアクティビティでも使用でき、どこからでも変更できますが、ローカル変数は設定された範囲内でのみ使用されます。
多くのアクティビティで使用できるグローバル スコープ変数は、React Native でサポートされています。 したがって、このチュートリアルでは、React Native でグローバル スコープ変数を作成し、それらを多くのアクティビティで使用します。
React Native でグローバル変数を使用する
グローバル変数を作成するには、組み込みの用語 global を使用する必要があります。 詳細については、以下のコードを参照してください。
構文：
global.myvar = 'Welcome to Upwork';
myvar というローカル変数がある場合、それは同じクラスからのみ利用できます。 そして、global.myvar がある場合、それはグローバルになり、どのアプリケーション クラスからもアクセスできるようになります。
次の例は、それを理解するのに役立ちます。 最初の画面と 2 番目の画面の両方からアクセスされる global.MyVar 変数は、最初の画面で初期化されました。
最初に、react-navigation ライブラリをプロジェクトにインポートして、アクティビティ構造を作成します。これがないと、プロジェクトで多くのアクティビティを利用できないためです。
npm install --save react-navigation
任意のコード エディターで App.js を開き、コードを次のコードに置き換えます。
コード例 (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;
ここで使用されるNavigatorを使用すると、コンポーネントを作成したり、さまざまなコンポーネントをナビゲートしたりできます。 最初のページと呼ばれる画面の 1つの要素があり、タイトル、色、ヘッダー スタイル、フォント、フォントの太さなどのプロパティがあるように、画面間を移動するのに役立ちます。
同様に、2 番目の画面は Second Page と呼ばれ、タイトル、色、ヘッダー スタイル、フォント、フォントの太さなどのプロパティがあります。
任意のコード エディターで、FirstPage.js のコードを次のコードに置き換えます。
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;
グローバル変数は、キーワード global を使用して宣言されます。 global キーワードを使用した後、その変数にグローバル値を格納する必要があります。
ご覧のとおり、MyVar 変数はグローバルに宣言されており、値 Welcome To Upwork が格納されています。 一度だけ初期化する必要があります。
これで、必要に応じて別のページでその変数を使用できるようになりました。
任意のコード エディターで SecondPage.js を開き、コードを次のコードに置き換えます。
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;
出力：
スクリーンショットでは、変数の値と GO TO SECOND PAGE という名前のボタンを確認できます。 ナビゲーターの助けを借りて、最初のページを 2 番目のページにレンダリングします。
このスクリーンショットでは、グローバル変数も使用されていることがわかります。
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