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,
- 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,