Доступность сети в React-Native

В этой истории мы просто займемся проверкой доступности Интернета

Один из членов моей команды (Тамил Пракаш) разрешил мне эту потребность в одном из проектов нашего клиента. Эта история призвана заставить его гордиться своей работой.

Наша проблема

В React-native мы столкнулись с проблемой. Что нам нужно переключать экран ошибки при включении или выключении Интернета. Я передал эту проблему своей команде, и они заставили меня гордиться своим решением.

Во-первых, нам нужно установить react-native-community / NetInfo.

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

Затем начните переходить к нашему коду,

1. Импортируйте пакет в свой класс,

import NetInfo from '@react-native-community/netinfo';

2. Создайте класс и экспортируйте его. Назовем его здесь NetworkManager.

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

3. Объявите некоторые переменные, которые будут контролировать интернет-покрытие внутри конструктора.

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

4. Объявите функцию, мы назвали ее Инициализировать и добавили в нее слушателя.

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

5. Теперь нам нужно создать асинхронную функцию для изменения фона в Интернете.

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

6. Теперь создайте еще одну функцию для регистрации обратного вызова соединения.

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

7. Создайте другую функцию для события «Соединение изменено».

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);
  }
}

Теперь ваш окончательный код выглядит так:

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. Теперь импортируйте и с легкостью используйте этот класс в своем компоненте.

Наконец-то мы получили это,

Я надеюсь, что это будет полезно для вас, все заслуги моей команде.

Спасибо,

Строить на миллиарды