Kuvia on helppo lisätä React Native -sovellukseesi. Hyödynnä kaikki sisäänrakennetun Image-komponentin ominaisuudet.

Kuvat tarjoavat paljon arvoa mobiilisovelluksille. Ne voivat auttaa havainnollistamaan käsitteitä, välittämään tietoa, luomaan visuaalista mielenkiintoa ja tarjoamaan kontekstin tietylle sisällölle, jota et ehkä halua sovelluksesi käyttäjien näkevän.

React Native Image -komponentti

React Native -kuvakomponentti on React Native -kirjaston tarjoama oletuskomponentti kuvien renderöimiseksi mobiilisovelluksissasi. Komponentti voi ladata kuvia sekä paikallisista että etälähteistä. Se tarjoaa useita rekvisiitta hahmonnettujen kuvien mukauttamiseen ja tyyliin.

Voit käyttää kuvakomponenttia sovelluksessasi tuomalla Kuva alkaen reagoiva syntyperäinen kirjasto:

tuonti Reagoi alkaen'reagoi';
tuonti { Tyylitaulukko, kuva, näkymä } alkaen'react-native';
konst Sovellus = () => {
palata (

 style={styles.image}
 lähde={vaatia('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({





instagram viewer



 kontti: {
 flex: 1,
 alignItems: 'keskusta',
 perustellaContent: 'keskusta',
 },
 kuva: {
 leveys: 200,
 korkeus: 200,
 rajasäde: 100,
 },
});

Yllä on yksinkertainen Sovellus komponentti kuvan kanssa. The Kuva komponentti kestää a tyyli prop, joka asettaa leveys, korkeus, ja rajasäde kuvasta. Se kestää myös a lähde prop, joka lataa kuvan paikallisesta tiedostosta, joka sijaitsee sovellushakemiston "resurssit"-kansiossa. The lähde prop määrittää sisällytettävän kuvan polun ja voi hyväksyä sekä paikalliset että verkko/etäkuvalähteet.

Paikalliset kuvat ovat saatavilla käyttäjän laitteelle ja voit tallentaa ne joko väliaikaisesti tai pysyvästi. Voit tallentaa paikallisia kuvia sovelluksen projektihakemistoon, kuten omaisuutta kansio. Voit myös etsiä kuvia sovelluksen hakemiston ulkopuolelta, kuten laitteen kameran rullasta tai valokuvakirjastosta. Tässä on esimerkki paikallisen kuvan lähdepolusta:

uri: 'file:///path/to/oma-image.jpg' }} />

Verkkokuvat toimitetaan verkon kautta. Ne voivat sisältää HTTP/HTTPS-URL-osoitteita tai base64-koodattuja tieto-URI-osoitteita, jotka upottavat tiedot suoraan URL-osoitteeseen Base64-koodausmallia käyttäen.

Rekvisiittaa kuvakomponentin mukauttamiseen

React Native Image -komponentin tyylistämiseen ja mukauttamiseen voit käyttää useita rekvisiitta.

resizeMode

The resizeMode prop määrittää, kuinka Reactin tulee muuttaa kuvan kokoa ja sijoittaa sen säilöön. Käytettävissä on useita arvoja resizeMode, joista jokainen vaikuttaa kuvaan eri tavalla.

  • peite: Tämä arvo skaalaa kuvan tasaisesti niin, että molemmat mitat ovat yhtä suuria tai suurempia kuin sen sisältävä elementti. Kuva keskitetään sitten säiliöön. Tämän arvon käyttäminen voi johtaa kuvan rajaamiseen kuvasuhteen säilyttämiseksi.
  • sisältää: Tämä yrittää sovittaa ja keskittää kuvan täydellisesti säiliön mittoihin. Tämä voi kuitenkin johtaa tyhjään tilaan kuvan reunojen ympärille.
  • venyttää: venyttää arvo venyttää kuvan täyttämään koko säiliön kuvasuhteesta riippumatta. Joskus aiheuttaa kuvan vääristymistä.
  • toistaa: Tämä arvo toistaa kuvan sekä vaaka- että pystysuunnassa täyttääkseen koko säiliön.
  • keskusta: Tämä keskittää kuvan säilön elementin sisällä skaalaamatta sitä.

lastina

Tämä on takaisinsoittotoiminto joka käynnistyy, kun kuva on latautunut. Voit käyttää sitä toimintojen suorittamiseen kuvan latautumisen jälkeen, kuten komponentin tilan päivittämiseen tai viestin näyttämiseen käyttäjälle.

onError

The onError prop toimii, jos tai kun kuva ei lataudu. Se tarjoaa tavan suorittaa tarvittavat toiminnot, jos kuvan lataamisessa tapahtuu virhe. Voit näyttää virheilmoituksen käyttäjälle tai yrittää ladata kuvan uudelleen.

oletuslähde

Tämä ehdotus määrittää varakuvan, joka näytetään, jos pääkuva ei lataudu. Voit käyttää sitä oletuskuvan tai paikkamerkkikuvan tarjoamiseen pääkuvan latautuessa.

Etäkuvien käsittely API: sta

Sinun on ehkä hankittava sovelluksesi kuva sovellusliittymästä tai etäpalvelimesta ja näytettävä se sovelluksessasi. Voit käyttää sisäänrakennettua Reactia hakea toiminto tai an API-pyyntökirjasto, kuten Axios tähän tarkoitukseen.

Tässä on esimerkki kuvan noutamisesta ja näyttämisestä etäsovellusliittymästä käyttämällä hakea toiminto:

konst [imageUri, setImageUri] = useState(tyhjä);
useEffect(() => {
 hae(' https://example.com/api/images/1')
 .sitten(vastaus => vastaus.json())
 .sitten(tiedot => setImageUri (data.url))
 .ottaa kiinni(virhe =>konsoli.error (virhe));
}, []);
palata (

 {imageUri? (
uri: imageUri }} />
 ): (
Ladataan...</Text>
 )}
 </View>
);

Tämän koodin suorittaminen sovelluksessasi hakee kuvan määritetystä API-etälinkistä. Esimerkki luo ensin tilamuuttujan imageUri. Sisällä a useEffect koukku, hakea toiminto hakee imageUrin ja tallentaa sen tilamuuttujaan käyttämällä setImageUri().

Lopulta se tekee Kuva komponentin kanssa lähde prop asetettu kuvan URI: hen, kun latausilmaisin näkyy ja odottaa kuvan ilmestymistä.

Välimuistikäytäntöpropin käyttäminen välimuistin toiminnan hallitsemiseen

Selaimesi voi tallentaa välimuistiin etä-URL-osoitteista lataamansa kuvat, jotta se voi ladata ne nopeasti uudelleen tulevaisuudessa. Voit mukauttaa välimuistissa olevan kuvan toimintaa käyttämällä kätkö prop. Tämä ehdotus voi määrittää, kuinka selaimen tulee tallentaa kuva välimuistiin ja miten se mitätöi välimuistin.

Välimuisti voi ottaa arvoja, kuten oletus, lataa uudelleen, pakota välimuisti, ja vain-jos-välimuistissa.

Tässä on esimerkki kuinka käyttää kätkö ehdotus kuvan välimuistin toiminnan ohjaamiseen:

 lähde={{
 uri: ' https://example.com/images/my-image.png',
 kätkö: 'force-cache',
 cacheKey: "minun kuvani",
 muuttumaton: totta
 }}
/>

The kätkö ominaisuus on asetettu 'force-cache', joka osoittaa, että selaimen tulee ladata kuva välimuistista, jos se on saatavilla, vaikka välimuistiversio olisi vanha.

Uusi rekvisiitta cacheKey on myös täällä pelissä. Se on asetettu "minun kuvani", joka toimii mukautetun välimuistin avaimena, jonka avulla voit viitata välimuistiin tallennettuun kuvaan myöhemmin.

Myös, muuttumaton ominaisuus on asetettu totta, joka käskee selainta käsittelemään tätä välimuistimerkintää muuttumattomana eikä koskaan mitätöi sitä.

Kaikki siellä on kuvista

React Native Image -komponentti tarjoaa tehokkaan ja joustavan tavan kuvien näyttämiseen, mukaan lukien muotoilu, etäkuvien käsittely ja välimuistin käyttäytymisen hallinta.

Etäkuville voit aina käyttää paikkamerkkiä näyttääksesi väliaikaisen kuvan tai tekstin, kun etäkuva latautuu. Tämä luo paremman käyttökokemuksen antamalla välitöntä visuaalista palautetta ja estämällä sovellusta näyttämästä reagoimattomalta.