HOWTO · React Native
React Native でグローバル変数を使用する
この記事は、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 番目のページにレンダリングします。
このスクリーンショットでは、グローバル変数も使用されていることがわかります。
