ایجاد متغیر Global در react native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم چجوری متغیر Global در React Native ایجاد کنیم.بصورت پیشفرض دو نوع متغیر در React Native وجود دارد،متغیرهای Local و متغیرهای Global.متغیرهای Local در محدوده تعریف شده استفاده میشوند و متغیرهای Global در هر activity قابل استفاده و قابل تغییر هستند.React Native از متغیرهای Global که قایل استفاده در activity های مختلف است.پشتیبانی میکند.در این آموزش ما یک اپلیکیشن با دو activity ایجاد میکنیم که متغیر global در سازنده activity اول تعریف شده و در activity دیگر از این متغیر استفاده میکنیم.
برای تعریف متغیر Global باید از کلمه کلیدی global استفاده کنیم.به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 |
constructor(){ super(); // Creating Global Variable. global.SampleVar = 'This is Global Variable.'; } |
1.ایمپورت کردن کتابخانه react-navigation.برای نصب این کتابخانه به پوشه پروژه رو در CMD باز کنید و دستور npm install —save react–navigation رو اجرا کنید.
2.ایمپورت کردن کامپوننت های StyleSheet, View, Text و Button در پروژه.
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; |
3.ایمپورت ماژول StackNavigator از کتابخانه react navigation.
|
1 |
import { StackNavigator } from 'react-navigation'; |
4.نعریف کلاس MainActivity در فایل App.js. ما متغیر Global رو در ()constructor این کلاس تعریف میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
class MainActivity extends Component { constructor(){ super(); // Creating Global Variable. global.SampleVar = 'This is Global Variable.'; } static navigationOptions = { title: 'MainActivity', }; navigate2SecondActivity = () => { this.props.navigation.navigate('Second'); } render() { return( <View style = { styles.MainContainer }> <View style={{marginBottom: 15}}> <Text style = { styles.textStyle }> MainActivity </Text> </View> <Button onPress = { this.navigate2SecondActivity } title = 'Open Second Activity'/> </View> ); } } |
5.ایجاد کلاس SecondActivity. در این کلاس ما متغیر Global را درون کامپوننت Text نمایش میدهیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class SecondActivity extends Component { static navigationOptions = { title: 'SecondActivity', }; render() { return( <View style = { styles.MainContainer }> <Text style = { styles.textStyle }> {global.SampleVar} </Text> </View> ); } } |
6.ایجاد تابع ()StackNavigator بعد از کلاسSecondActivity.از این تابع برای فراخوانی activity ها و جابجایی بین آنها استفاده میکنیم.
|
1 2 3 4 5 6 |
export default MyNewProject = StackNavigator( { First: { screen: MainActivity }, Second: { screen: SecondActivity } }); |
7.ایجاد استایل سفارشی
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex:1, margin: 10 }, textStyle: { fontSize: 22, textAlign: 'center', color: '#000', }, }); |
8.کد کامل برنامه در فایل App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Button } from 'react-native'; import { StackNavigator } from 'react-navigation'; class MainActivity extends Component { constructor(){ super(); global.SampleVar = 'This is Global Variable.'; } static navigationOptions = { title: 'MainActivity', }; navigate2SecondActivity = () => { this.props.navigation.navigate('Second'); } render() { return( <View style = { styles.MainContainer }> <View style={{marginBottom: 15}}> <Text style = { styles.textStyle }> MainActivity </Text> </View> <Button onPress = { this.navigate2SecondActivity } title = 'Open Second Activity'/> </View> ); } } class SecondActivity extends Component { static navigationOptions = { title: 'SecondActivity', }; render() { return( <View style = { styles.MainContainer }> <Text style = { styles.textStyle }> {global.SampleVar} </Text> </View> ); } } export default MyNewProject = StackNavigator( { First: { screen: MainActivity }, Second: { screen: SecondActivity } }); const styles = StyleSheet.create( { MainContainer: { justifyContent: 'center', flex:1, margin: 10 }, textStyle: { fontSize: 22, textAlign: 'center', color: '#000', }, }); |
اسکرین شات در نسخه اندروید:
اسکرین شات در نسخه Ios:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید