Ushbu hikoyada biz shunchaki internet mavjudligini tekshirish bilan shug'ullanamiz

Mening jamoam a'zolaridan biri sifatida (Tamil Prakash) mijozimizning loyihalaridan biriga bo'lgan ehtiyojimni hal qildi. Bu hikoya uning ishi bilan faxrlanishini his qilishdir.

Bizning muammomiz

React-nativeda biz muammoga duch kelamiz. Internet yoqilgan yoki o'chirilgan bo'lsa, biz Xato ekranini o'zgartirishimiz kerak. Men bu muammoni jamoamga topshirdim va ular meni hal qilishlari bilan faxrlanishdi.

Birinchidan, biz react-native-community/NetInfoni o'rnatishimiz kerak

npm install @react-native-community/netinfo --save

Keyin bizning kodimizga o'tishni boshlang,

  1. Paketni sinfingizga import qiling,
import NetInfo from '@react-native-community/netinfo';

2. Sinf yarating va uni eksport qiling, Biz uni bu yerda NetworkManager deb nomlaymiz

class NetworkManagerClass {
}
const NetworkManager = new NetworkManagerClass(); //singleton object
export default NetworkManager;

3. Konstruktor ichidagi internet qamrovini nazorat qilish uchun ba'zi o'zgaruvchilarni e'lon qiling.

constructor() {
    this.IsInternetAvailable = true; // internet avail bool
    this.ConnectionType = undefined; // Wifi or mobile data
    this._listeners = []; // internet change callbacks
    this.Initialize();
}

4. Funktsiyani e'lon qiling, biz uniInitialize deb nomladik va uning ichiga tinglovchi qo'shdik.

Initialize()
{
  NetInfo.addEventListener((connectionInfo)=>                        {this.ConnectionChanged(connectionInfo)});
  this.CheckAndUpdateConnection();
}

5. Endi biz internetda fonni o'zgartirish uchun async funksiyasini yaratishimiz kerak.

async CheckAndUpdateConnection()
{
  let connectionInfo = await NetInfo.fetch();
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  return this.IsInternetAvailable;
}

6. Endi ulanishni qayta qo'ng'iroqni ro'yxatdan o'tkazish uchun boshqa funksiya yarating

RegisterConnectionChangeCallback(event)
{
  this._listeners.push(event);
}

7. Connection Changed hodisasi uchun boshqa funksiya yarating.

ConnectionChanged(connectionInfo)
{
this.IsInternetAvailable = connectionInfo.isInternetReachable;
this.ConnectionType = connectionInfo.type;
for(var i = 0; i < this.Listeners.length; i++)
  {
   this._listeners[i](this.IsInternetAvailable,   this.ConnectionType);
  }
}

Endi sizning oxirgi kodingiz shunday ko'rinadi,

import NetInfo from '@react-native-community/netinfo';
class NetworkManagerClass {
  constructor() {
   this.IsInternetAvailable = true; // internet avail bool
   this.ConnectionType = undefined; // Wifi or mobile data
   this._listeners = [];  // register for callbacks
   this.Initialize();
 }
 Initialize()
 {
  NetInfo.addEventListener((connectionInfo)=>{this.ConnectionChanged(connectionInfo)});
  this.CheckAndUpdateConnection();
 }
  async CheckAndUpdateConnection()
 {
  let connectionInfo = await NetInfo.fetch();
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  return this.IsInternetAvailable;
 }
RegisterConnectionChangeCallback(event)
{
  this._listeners.push(event);
}
ConnectionChanged(connectionInfo)
{
  this.IsInternetAvailable = connectionInfo.isInternetReachable;
  this.ConnectionType = connectionInfo.type;
  for(var i = 0; i < this.Listeners.length; i++)
  {
   this._listeners[i](this.IsInternetAvailable, this.ConnectionType);
  }
 }
}
const NetworkManager = new NetworkManagerClass();
export default NetworkManager;

8. Endi ushbu sinfni import qiling va komponentingizda qulaylik bilan foydalaning.

Nihoyat, biz buni oldik,

Umid qilamanki, bu sizga foydali bo'ladi, barcha kreditlar mening jamoamga.

dan rahmat,

Millardlar uchun qurish