React Native Network Info API Androidille ja iOS: lle

Blogi

React Native Network Info API Androidille ja iOS: lle

@react-native-community/netinfo

React Native Network Info API Androidille, iOS: lle, macOS: lle ja Windowsille. Sen avulla voit saada tietoa seuraavista:

  • Yhteystyyppi
  • Yhteyden laatu

Päästä alkuun

Asenna kirjasto joko langalla:

yarn add @react-native-community/netinfo

tai npm:

npm install --save @react-native-community/netinfo
Käyttämällä React Native> = 0,60

Paketin linkittäminen manuaalisesti ei ole enää tarpeen Automaattinen linkitys .

  • iOS -alusta:

    | _+_ | # CocoaPods iOS: ssa tarvitsee tämän lisävaiheen

  • Android -alusta Android -tuella:

    Käyttämällä Jetifier -työkalu taaksepäin yhteensopivuuden vuoksi.

    Muokkaa omaasi android/build.gradle kokoonpano:

    $ npx pod-install
  • Android -alusta AndroidX: llä:

    Muokkaa omaasi android/build.gradle kokoonpano:

    buildscript { ext { buildToolsVersion = '28.0.3' minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Only using Android Support libraries supportLibVersion = '28.0.0' }
  • macOS -alusta:

    Automaattinen linkitys ei ole vielä saatavilla macOS: ssä. Katso Manuaaliset linkitysvaiheet macOS: lle alla.

    nukkainen hirsipohja 10
React Native -ohjelman käyttö<0.60

Sinun on sitten linkitettävä kirjaston alkuperäiset osat käyttämillesi alustoille. Helpoin tapa linkittää kirjasto on CLI -työkalun avulla suorittamalla tämä komento projektin juuresta:

buildscript { ext { buildToolsVersion = '28.0.3' minSdkVersion = 16 compileSdkVersion = 28 targetSdkVersion = 28 # Remove 'supportLibVersion' property and put specific versions for AndroidX libraries androidXCore = '1.0.2' // Put here other AndroidX dependencies }

Jos et voi tai halua käyttää CLI -työkalua, voit myös linkittää kirjaston manuaalisesti alla olevien ohjeiden mukaisesti (näytä ne napsauttamalla nuolta):

Linkitä kirjasto manuaalisesti iOS: ssä

mistä voin ostaa csc-kolikoita

Joko seuraa ohjeet React Native -dokumentaatiossa linkittää kehys tai linkki manuaalisesti käyttämällä Cocoapodit lisäämällä tämä | _+_ |:

react-native link @react-native-community/netinfo

Linkitä kirjasto manuaalisesti macOS: ssa

  1. Avaa projekti | _+_ | xcode -koodilla.

  2. Napsauta hiiren kakkospainikkeella Kirjastot -kansiota ja valitse | _+_ |.

  3. Lisää | _+_ | (sijaitsee osoitteessa | _+_ |) projektisi kirjastoihin.

  4. Siirry | _+_ | ja lisää: | _+_ |.

Linkitä kirjasto manuaalisesti Androidissa

Tee seuraavat muutokset:

Podfile

pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'

.xcodeproj

Add files to 'yourProjectName'

RNCNetInfo.xcodeproj

Lisäksi tuonti:

node_modules/@react-native-community/react-native-netinfo/macos

Lisää | _+_ | luokka viedyistä paketeistasi.

Build Phases -> Link Binary with Libraries

Linkitä kirjasto manuaalisesti Windowsissa

Linkin C ++ toteutus
  • Avaa ratkaisu Visual Studiossa Windows -sovelluksillesi
  • Napsauta Resurssienhallintaa hiiren kakkospainikkeella ja valitse Lisää> Olemassa oleva projekti…
  • Siirry kohtaan | _+_ | ja lisää | _+_ |
  • Tällä kertaa napsauta hiiren kakkospainikkeella React Native Windows -sovellustasi ratkaisuhakemistosi alla ja napsauta Lisää> Viite…
  • Tarkista | _+_ | lisäsit juuri ja painat ok
  • Avaa | _+_ |, lisää | _+_ |
  • Avaa | _+_ |, lisää | _+_ | ennen | _+_ |
Linkin C# toteutus
  • Avaa ratkaisu Visual Studiossa Windows -sovelluksillesi
  • Napsauta Resurssienhallintaa hiiren kakkospainikkeella ja valitse Lisää> Olemassa oleva projekti…
  • Siirry kohtaan | _+_ | ja lisää | _+_ |
  • Tällä kertaa napsauta hiiren kakkospainikkeella React Native Windows -sovellustasi ratkaisuhakemistosi alla ja napsauta Lisää> Viite…
  • Tarkista | _+_ | lisäsit juuri ja painat ok
  • Avaa | _+_ | sovelluksellesi ja muokkaa tiedostoa seuraavasti:
libRNCNetInfo-macOS.a

React Native -yhteensopivuus

Jotta voit käyttää tätä kirjastoa, sinun on varmistettava, että käytät oikeaa React Native -versiota. Jos käytät React Native -versiota, joka on pienempi kuin | _+_ | sinun on päivitettävä se ennen tämän kirjaston käyttämistä.

| _+_ | versio Pakollinen React -alkuperäinen versio
android/settings.gradle & include ':react-native-community-netinfo' project(':react-native-community-netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android') | _+_ | tai | _+_ | jos käytät Jetify
android/app/build.gradle dependencies { ... implementation project(':react-native-community-netinfo') }
android/app/src/main/.../MainApplication.java import com.reactnativecommunity.netinfo.NetInfoPackage;
NetInfoPackage @Override protected List getPackages() { return Arrays.asList( new MainReactPackage(), new NetInfoPackage() ); }

Selaimen yhteensopivuus

Verkon toteutus riippuu suuresti Verkkotietojen sovellusliittymä joka on edelleen kokeellinen tekniikka, joten sitä ei tueta kaikissa selaimissa. Jos tämä sovellusliittymä ei ole käytettävissä, kirjasto palaa turvallisesti vanhaan onLine omaisuuden ja palautuksen perustiedot.

Siirtyminen ytimestä | _+_ | moduuli

Tämä moduuli luotiin, kun NetInfo erotettiin React Native -ohjelman ytimestä. Siirtyäksesi tähän moduuliin sinun on noudatettava yllä olevia asennusohjeita ja muutettava sitten tuontisi kohteesta:

reagoi jousi vs framer liikkeeseen
.//node_modules/@react-native-community/netinfo/windows/RNCNetInfoCPP/

kohteeseen:

RNCNetInfoCPP.vcxproj

Huomaa, että sovellusliittymä päivitettiin sen jälkeen, kun se oli purettu NetInfosta tukemaan joitakin uusia ominaisuuksia, mutta edellinen sovellusliittymä on edelleen käytettävissä ja toimii ilman päivityksiä koodiin.

Käyttö

Tuo kirjasto:

RNCNetInfoCPP

Tilaa verkon tilan päivitykset:

pch.h

Hae verkon tila kerran:

#include 'winrt/ReactNativeNetInfo.h'

ANTAA POTKUT

Tyypit

MainReactNativeHost.cs

Kuvaa verkon nykyistä tilaa. Se on objekti, jolla on seuraavat ominaisuudet:

Omaisuus Tyyppi Kuvaus
+ using ReactNativeCommunity.NetInfo; ...... protected override List Packages => new List { new MainReactPackage(), + new RNCNetInfoPackage(), }; 0.57 Nykyisen yhteyden tyyppi.
@react-native-community/netinfo 4.x.x Jos verkkoyhteys on aktiivinen. Huomaa, että tämä EI tarkoita, että Internet on tavoitettavissa.
5.x.x >= 0.60 Jos Internet on tavoitettavissa tällä hetkellä aktiivisen verkkoyhteyden avulla.
>= 0.59 3.x.x (Vain Android) Onko laitteen WiFi päällä tai pois päältä.
>= 0.59 Arvo riippuu | _+_ | arvo. Katso alempaa.

| _+_ | arvo riippuu | _+_ | arvo.

| _+_ | on | _+_ | tai | _+_ |

| _+_ | on | _+_ |.

| _+_ | on | _+_ |

| _+_ | on nämä ominaisuudet:

Omaisuus Alusta Tyyppi Kuvaus
2.x.x Android, iOS, macOS, Windows, verkko >= 0.57 Jos verkkoyhteyttä pidetään kalliina. Tämä voi olla joko energiaa tai rahaa.
1.x.x Android, iOS (ei tvOS) >= 0.57 Verkon SSID. Ei saa olla läsnä, | _+_ | tai tyhjä merkkijono, jos sitä ei voida määrittää. Varmista iOS: ssa, että sovelluksesi täyttää vähintään yhden seuraavista seuraavat vaatimukset . Androidissa sinulla on oltava | _+_ | lupa | _+_ | ja käyttäjä hyväksyy sen .
react-native Android, iOS (ei tvOS) import { NetInfo } from 'react-native'; Verkon BSSID. Ei saa olla läsnä, | _+_ | tai tyhjä merkkijono, jos sitä ei voida määrittää. Varmista iOS: ssa, että sovelluksesi täyttää vähintään yhden seuraavista seuraavat vaatimukset . Androidissa sinulla on oltava | _+_ | lupa | _+_ | ja käyttäjä hyväksyy sen .
import NetInfo from '@react-native-community/netinfo'; Android import NetInfo from '@react-native-community/netinfo'; Kokonaisluku numerosta | _+_ | | _+_ | signaalin voimakkuuden vuoksi. Ei saa olla läsnä, jos signaalin voimakkuutta ei voida määrittää.
// Subscribe const unsubscribe = NetInfo.addEventListener(state => { console.log('Connection type', state.type); console.log('Is connected?', state.isConnected); }); // Unsubscribe unsubscribe(); Android, iOS, macOS NetInfo.fetch().then(state => { console.log('Connection type', state.type); console.log('Is connected?', state.isConnected); }); Ulkoinen IP -osoite. Voi olla IPv4- tai IPv6 -muodossa. Ei saa olla läsnä, jos sitä ei voida määrittää.
NetInfoState Android, iOS, macOS NetInfoStateType Aliverkon peite IPv4 -muodossa. Ei saa olla läsnä, jos sitä ei voida määrittää.
NetInfoCellularGeneration Android fetch() Verkon taajuus. Esimerkki: 2,4 GHz: n verkoissa menetelmä palauttaa 2457. Ei välttämättä ole läsnä, jos sitä ei voida määrittää.
| _+_ | on | _+_ |

| _+_ | on nämä ominaisuudet:

Omaisuus Alusta Tyyppi Kuvaus
addEventListener() Android, iOS, macOS, Windows, verkko useNetInfo() Jos verkkoyhteyttä pidetään kalliina. Tämä voi olla joko energiaa tai rahaa.
NetInfoState Android, iOS, Windows type Sen matkapuhelinverkon luominen, johon käyttäjä on yhteydessä. Tämä voi antaa viitteitä nopeudesta, mutta ei takuuta.
NetInfoStateType Android, iOS isConnected Verkko -operaattorin nimi. Ei voi olla läsnä tai se voi olla tyhjä, jos mitään ei voida määrittää.
| _+_ | on | _+_ |, | _+_ |, | _+_ |, | _+_ | tai | _+_ |

| _+_ | on nämä ominaisuudet:

Omaisuus Tyyppi Kuvaus
boolean isInternetReachable Jos verkkoyhteyttä pidetään kalliina. Tämä voi olla joko energiaa tai rahaa.

boolean

Kuvaa nykyisen verkkoyhteyden tyypin. Se on enum, jolla on seuraavat mahdolliset arvot:

Arvo Alusta Kuvaus
isWifiEnabled Android, iOS, macOS, Windows, verkko Mikään verkkoyhteys ei ole aktiivinen
boolean Android, iOS, macOS, Windows, verkko Verkon tilaa ei voitu tai ei ole vielä määritetty
details Android, iOS, Windows, verkko Aktiivinen verkko matkapuhelinverkon yli
type Android, iOS, macOS, Windows, verkko Aktiivinen verkko Wifin kautta
details Android, verkko Aktiivinen verkko Bluetoothin kautta
type Android, macOS, Windows, verkko Aktiivinen verkko langallisen Ethernetin kautta
type Android, verkko Aktiivinen verkko WiMaxin kautta
none Android Aktiivinen verkko VPN: n kautta
unknown Android, iOS, macOS, Windows, verkko Aktiivinen verkko muuntyyppisen verkon yli

details

Kuvaa | _+_ |: n nykyistä sukupolvea yhteys. Se on enum, jolla on seuraavat mahdolliset arvot:

Arvo Kuvaus
null Joko emme ole tällä hetkellä yhteydessä matkapuhelinverkkoon tai tyyppiä ei voitu määrittää
type Tällä hetkellä yhteys 2G -matkapuhelinverkkoon. Sisältää CDMA-, EDGE-, GPRS- ja IDEN -yhteydet
wifi Tällä hetkellä yhteydessä 3G -matkapuhelinverkkoon. Sisältää EHRPD-, EVDO-, HSPA-, HSUPA-, HSDPA- ja UTMS -tyyppiset liitännät
details Tällä hetkellä kytketty 4G -matkapuhelinverkkoon. Sisältää HSPAP- ja LTE -tyyppiset liitännät

isConnectionExpensive

Kirjaston määritysvaihtoehdot.

tuoda luokan python toisesta tiedostosta
Omaisuus Tyyppi Kuvaus
boolean ssid URL -osoite, johon voit soittaa ja testata, onko internetyhteys tavoitettavissa. Käytetään vain alustoilla, jotka eivät tarjoa internetyhteyttä alkuperäisesti.
string null Funktio, joka välitetään | _+_ | kutsumasta tavoitettavuuden URL -osoitetta. Sen pitäisi palata | _+_ | jos vastaus osoittaa, että Internet on tavoitettavissa. Käytetään vain alustoilla, jotka eivät tarjoa Internet -yhteyksiä luonnollisesti.
ACCESS_FINE_LOCATION AndroidManifest.xml Millisekuntien määrä Internetin saavutettavuustarkistusten välillä, kun Internetiä ei aiemmin havaittu. Käytetään vain alustoilla, jotka eivät tarjoa internetyhteyttä alkuperäisesti.
bssid string Millisekuntien määrä Internetin saavutettavuustarkistusten välillä, kun internet havaittiin aiemmin. Käytetään vain alustoilla, jotka eivät tarjoa internetyhteyttä alkuperäisesti.
null ACCESS_FINE_LOCATION Millisekuntien määrä saavutettavuustarkastuksessa sallitaan ennen epäonnistumista. Käytetään vain alustoilla, jotka eivät tarjoa internetyhteyttä alkuperäisesti.

Menetelmät

AndroidManifest.xml

Määrittää kirjaston annetulla kokoonpanolla. Sinun tarvitsee vain toimittaa oletusarvoista muutettavat ominaisuudet.

Huomaa, että tämän soittaminen lopettaa kaikkien aiemmin lisättyjen kuuntelijoiden soittamisen uudelleen. On parasta soittaa tähän oikein, kun sovelluksesi käynnistetään ongelmien välttämiseksi.

Esimerkki:

strength

number

Tilaa yhteystiedot. Takaisinsoittoa kutsutaan tyypin parametrilla 0 aina, kun yhteyden tila muuttuu. Kuuntelijalle soitetaan uusimmat tiedot pian tilauksen jälkeen ja sen jälkeen mahdollisilla muutoksilla sen jälkeen. Sinun ei pitäisi olettaa, että kuuntelijaa kutsutaan samalla tavalla eri laitteilla tai alustoilla.

Parametri Tyyppi Kuvaus
100 ipAddress string ) subnet Kuuntelija, jolle soitetaan aina, kun yhteyden tila muuttuu

Esimerkki:

string

frequency

TO React Hook jota voidaan käyttää pääsemään uusimpaan tilaan. Se palauttaa koukun number tyyppi.

Esimerkki:

type

Voit halutessasi lähettää kokoonpanon koukkua määritettäessä. Huomaa, että kirjaston kokoonpano on yleinen, joten sinun ei pitäisi lähettää eri kokoonpanoja eri koukkuille. Sen sijaan on suositeltavaa soittaa | _+_ | kerran, kun projekti alkaa. Koukkuvaihtoehto on vain vakuuttava.

cellular

details

Palauttaa | | _+_ | joka ratkaisee a isConnectionExpensive esine.

Esimerkki:

boolean

Voit halutessasi lähettää | _+_ | merkkijono niin | _+_ | ratkaisee a cellularGeneration alkaen NetInfoCellularGeneration merkitty | _+_ | Perustelu.

carrier

Ongelmien karttoittaminen

Virheitä Androidille rakennettaessa

Tämä kirjasto siirrettiin tukikirjaston käytöstä AndroidX -versioon | _+_ |. Kaikkien riippuvuuksien on käytettävä joko tukikirjastoa tai AndroidX. Näiden kahden seoksen käyttäminen ei ole mahdollista.

React Native 0.60: sta AndroidX on oletusarvoisesti käytössä.

Jos haluat joko muuntaa tämän kirjaston takaisin tukikirjastoksi (käyttääksesi vanhempaa React Native -versiota) tai muuntaa muut kirjastot eteenpäin käyttämään AndroidX: ää (jos niitä ei ole vielä päivitetty), voit käyttää Jetify työkalu.

Virheitä Jest -testejä suoritettaessa

Jos Jest Setup -tiedostoa ei ole määritetty, lisää Jest -asetuksiin seuraava ja luo | _+_ | tiedosto projektin juuressa:

string

Lisää seuraavaksi Jest -asennustiedostoosi NetInfo -alkuperäismoduulin pilkkaamiseksi:

type

Ongelmia iOS -simulaattorissa

Tuolla on tiedossa ongelma iOS -simulaattorin kanssa, mikä saa sen vastaanottamaan verkon muutosilmoitukset oikein, kun isäntäkone katkaisee yhteyden ja muodostaa yhteyden Wifi -verkkoon. Jos sinulla on ongelmia iOS: n kanssa, kokeile todellisella laitteella ennen kuin ilmoitat virheistä.

Ylläpitäjät

Osallistuminen

Katso avustava opas .

react-instagram-syöte

Lataustiedot:

Kirjailija: reagoi-native-netinfo

Lähdekoodi: https://github.com/react-native-netinfo/react-native-netinfo

#reagoi-natiivi #reaktio #mobiilisovellukset