تشخیص حالت Background در اپلیکیشن های react native

در گوشی های android و ios اپلیکیشن ها در دو حالت اجرا می شوند.اولین حالت که به Foreground شناخته می شود، اپلیکیشن باز است و کاربر در حال کار با آن است،دومین حالت Background است که اپلیکیشن در background باز است اما کاربر در حال کار با یک اپلیکیشن های دیگر است.کامپوننت AppState در react native برای تشخیص اینکه اپلیکیشن در چه حالتی است استفاده می شود و یک string را بر می گرداند.بنابراین در این آموزش متنی قصد داریم یاد بگیریم که چجوری با استفاده از AppState تشخیص بدیم که اپلیکیشن های react native در کدام حالت Foreground یاBackground هستند.

1.ایمپورت کامپوننت های StyleSheet, Text, View و AppState در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, Text, View, AppState } from 'react-native';

import React, { Component } from 'react';

import { StyleSheet, Text, View, AppState } from 'react-native';

2.تعریف ()constructor در کلاس اصلی و تعریف کردن یک state به نام appState.ما قصد داریم که مقدار AppState.currentState را در این state نگه داری کنیم.

constructor() {
    super();
    this.state = {
      appState: AppState.currentState,
    }
  }

constructor() {

super();

this.state = {

appState: AppState.currentState,

}

3.تعریف ()componentDidMount در کلاس اصلی و فراخوانی ()AppState.addEventListener در آن.ما تابع ()handleAppStateChange_ را فراخوانی خواهیم کرد.این method زمانی که اپلیکیشن استارت می شود یا در حالت foreground است فراخوانی می شود.

componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

componentDidMount() {

AppState.addEventListener('change', this._handleAppStateChange);

}

4.تعریف ()componentWillUnmount. در این method ما تابع ()AppState.removeEventListener را فراخوانی می کنیم.این method زمانی که اپلیکیشن به حالت background می رود فراخوانی می شود.

componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

componentWillUnmount() {

AppState.removeEventListener('change', this._handleAppStateChange);

}

5.تعریف تابع ()handleAppStateChange_ با پارامتر nextAppState .این تابع نقش اساسی و کلیدی در این آموزش دارد.در این تابع ما مقدار appState را چک می کنیم.

مقادیر تعریف شده برای App States:

1.active : اپلیکیشن در حالت foreground در حال اجرااست.

2.background: اپلیکیشن در حالت background یا minimize است.

3.inactive: اپلیکیشن در حالت inactive است.این حالت زمانی اتفاق می افتد که برنامه بین حالت های foreground و background در حال جابجایی است.

_handleAppStateChange = (nextAppState) => {
 
    this.setState({ appState: nextAppState });
 
    if (nextAppState === 'background') {
 
      // Do something here on app background.
      console.log("App is in Background Mode.")
    }
 
    if (nextAppState === 'active') {
 
      // Do something here on app active foreground mode.
      console.log("App is in Active Foreground Mode.")
    }
 
    if (nextAppState === 'inactive') {
 
      // Do something here on app inactive mode.
      console.log("App is in inactive Mode.")
    }
  };

_handleAppStateChange = (nextAppState) => {

this.setState({ appState: nextAppState });

if (nextAppState === 'background') {

// Do something here on app background.

console.log("App is in Background Mode.")

}

if (nextAppState === 'active') {

// Do something here on app active foreground mode.

console.log("App is in Active Foreground Mode.")

}

if (nextAppState === 'inactive') {

// Do something here on app inactive mode.

console.log("App is in inactive Mode.")

}

};

6.تعریف کامپوننت Text دورن بلاک render’s return و نشان دادن مقدار appState درون آن.

render() {
    return (
      <View style={styles.MainContainer}>

        <Text style={styles.text}>Current state is: {this.state.appState}</Text>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://reactapp.ir/%da%86%da%af%d9%88%d9%86%d9%87-%d8%a8%d8%b1%d9%86%d8%a7%d9%85%d9%87-%d9%87%d8%a7%db%8c-react-native-%d8%b1%d9%88-%d8%b1%d9%88%db%8c-%d9%85%d9%88%d8%a8%d8%a7%db%8c%d9%84-%d8%aa%d8%b3%d8%aa-%d9%88/" target="_blank" class="IRPP_ruby"><!-- INLINE RELATED POSTS 1/1 //--><style> .IRPP_ruby , .IRPP_ruby .postImageUrl , .IRPP_ruby .centered-text-area { height: 130px; position: relative; } .IRPP_ruby , .IRPP_ruby:hover , .IRPP_ruby:visited , .IRPP_ruby:active { border:0!important; } .IRPP_ruby .clearfix:after { content: ""; display: table; clear: both; } .IRPP_ruby { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2C3E50; } .IRPP_ruby:active , .IRPP_ruby:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #34495E; } .IRPP_ruby .postImageUrl { background-position: center; background-size: cover; float: right; margin: 0; padding: 0; width: 31.59%; } .IRPP_ruby .centered-text-area { float: left; width: 65.65%; padding:0; margin:0; } .IRPP_ruby .centered-text { display: table; height: 130px; right: 0; top: 0; padding:0; margin:0;float: left;width: 100%; } .IRPP_ruby .IRPP_ruby-content { display: table-cell; margin: 0; padding: 0 0px 0 74px; position: relative; vertical-align: middle; width: 100%; } .IRPP_ruby .ctaText { border-bottom: 0 solid #fff; color: #3498DB; font-size: 13px; font-weight: bold; margin: 0; padding: 0; } .IRPP_ruby .postTitle { color: #ECF0F1; font-size: 16px; font-weight: 600; margin: 0; padding: 0; } .IRPP_ruby .ctaButton { background: url(https://reactapp.ir/wp-content/plugins/intelly-related-posts-pro/assets/images/next-arrow.png)no-repeat; display: inline-block; height: 130px; width: 54px; } .IRPP_ruby .ctaButton { background-color: inherit; margin-left: 10px; position: absolute; left: 0; top: 0; } .IRPP_ruby:after { content: ""; display: block; clear: both; } </style><div data-bg="https://reactapp.ir/wp-content/uploads/Testing-react-native-app-in-device-300x142.png" class="postImageUrl rocket-lazyload" style=""></div><div class="centered-text-area"><div class="centered-text"><div class="IRPP_ruby-content"><div class="ctaText"></div><div style="clear:both"></div><div class="postTitle">چگونه برنامه های React Native رو روی موبایل تست و اجرا کنیم</div></div></div><div class="ctaButton"></div></div></a></div>
      </View>
    );
  }

render() {

return (

<Text style={styles.text}>Current state is: {this.state.appState}</Text>

</View>

);

}

7.ایحاد استایل سفارشی.

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
 
    fontSize: 20,
    color: '#000'
  }
});

const styles = StyleSheet.create({

MainContainer: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

backgroundColor: '#F5FCFF',

text: {

fontSize: 20,

color: '#000'

}

});

8.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
 
import { StyleSheet, Text, View, AppState } from 'react-native';
 
export default class App extends Component<> {
 
  constructor() {
    super();
    this.state = {
      appState: AppState.currentState,
    }
  }
 
  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }
 
  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }
 
  _handleAppStateChange = (nextAppState) => {
 
    this.setState({ appState: nextAppState });
 
    if (nextAppState === 'background') {
 
      // Do something here on app background.
      console.log("App is in Background Mode.")
    }
 
    if (nextAppState === 'active') {
 
      // Do something here on app active foreground mode.
      console.log("App is in Active Foreground Mode.")
    }
 
    if (nextAppState === 'inactive') {
 
      // Do something here on app inactive mode.
      console.log("App is in inactive Mode.")
    }
  };
 
  render() {
    return (
      <View style={styles.MainContainer}>
 
        <Text style={styles.text}>Current state is: {this.state.appState}</Text>
 
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
 
    fontSize: 20,
    color: '#000'
  }
});