Slike je preprosto dodati v vašo aplikacijo React Native. Izkoristite vse prednosti vgrajene komponente Image.

Slike zagotavljajo veliko vrednosti za mobilne aplikacije. Pomagajo lahko ilustrirati koncepte, posredovati informacije, ustvariti vizualno zanimivost in zagotoviti kontekst za določeno vsebino, za katero morda ne želite, da bi jo uporabniki vaše aplikacije spregledali.

Komponenta izvorne slike React

Slikovna komponenta React Native je privzeta komponenta, ki jo nudi knjižnica React Native za upodabljanje slik v vaših mobilnih aplikacijah. Komponenta lahko naloži slike iz lokalnih in oddaljenih virov. Zagotavlja več pripomočkov za prilagajanje in oblikovanje upodobljenih slik.

Če želite slikovno komponento uporabiti v svoji aplikaciji, uvozite Slika Iz react-native knjižnica:

uvoz Reagiraj od'reagirati';
uvoz {Slogovni list, slika, pogled} od'react-native';
konst Aplikacija = () => {
vrnitev (

 style={styles.image}
 vir={zahtevati('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({





instagram viewer



 vsebnik: {
 upogib: 1,
 alignItems: 'center',
 justifyContent: 'center',
 },
 slika: {
 premer: 200,
 višina: 200,
 borderRadius: 100,
 },
});

Zgoraj je preprosto aplikacija komponento s sliko. The Slika komponenta traja a stil rekvizit, ki določa premer, višina, in borderRadius slike. Potrebuje tudi a vir prop, ki naloži sliko iz lokalne datoteke, ki se nahaja v mapi "assets" v imeniku aplikacije. The vir prop definira pot slike, ki jo je treba vključiti, in lahko sprejme tako lokalne kot omrežne/oddaljene vire slik.

Lokalne slike so na voljo v napravi uporabnika in jih lahko shranite začasno ali trajno. Lokalne slike lahko shranite v projektni imenik aplikacije, kot je sredstev mapo. Slike lahko poiščete tudi zunaj imenika aplikacije, na primer v mapi fotoaparata ali knjižnici fotografij naprave. Tukaj je primer izvorne poti do lokalne slike:

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

Omrežne slike se dostavljajo prek spleta. Vključujejo lahko URL-je HTTP/HTTPS ali podatkovne URI-je, kodirane z base64, ki vdelajo podatke neposredno v URL z uporabo sheme kodiranja Base64.

Rekviziti za prilagajanje komponente slike

Obstaja več pripomočkov, ki jih lahko uporabite za oblikovanje in prilagajanje komponente React Native Image.

resizeMode

The resizeMode prop določa, kako naj React spremeni velikost in položaj slike v svojem vsebniku. Na voljo je več vrednosti za resizeMode, od katerih bo vsak drugače vplival na sliko.

  • pokrov: Ta vrednost bo enakomerno spremenila velikost slike, tako da sta obe dimenziji enaki ali večji od vsebovalnega elementa. Slika se nato sredi vsebnika. Če uporabite to vrednost, je lahko slika obrezana, da se ohrani razmerje stranic.
  • vsebujejo: S tem se bo slika poskušala popolnoma prilegati in centrirati znotraj dimenzij vsebnika. Vendar lahko to povzroči prazen prostor okoli robov slike.
  • raztegniti: The raztegniti vrednost raztegne sliko, da zapolni celoten vsebnik, ne glede na razmerje stranic. Včasih povzroči popačenje slike.
  • ponovite: Ta vrednost ponavlja sliko vodoravno in navpično, da zapolni celotno posodo.
  • center: To bo središče slike znotraj elementa vsebnika brez spreminjanja velikosti.

onLoad

To je a funkcijo povratnega klica ki se zažene, ko se slika konča z nalaganjem. Uporabite ga lahko za izvajanje dejanj po nalaganju slike, kot je posodabljanje stanja komponente ali prikaz sporočila uporabniku.

onError

The onError prop se bo zagnal, če ali ko se slika ne naloži. Ponuja način za izvajanje potrebnih dejanj, če pride do napake med poskusom nalaganja slike. Uporabniku lahko prikažete sporočilo o napaki ali znova poskusite naložiti sliko.

defaultSource

Ta predlog podaja nadomestno sliko, ki se prikaže, če se glavna slika ne naloži. Uporabite ga lahko za zagotovitev privzete slike ali nadomestne slike, medtem ko se glavna slika nalaga.

Upravljanje oddaljenih slik iz API-ja

Morda boste morali dobiti sliko za svojo aplikacijo iz API-ja ali oddaljenega strežnika in jo prikazati v svoji aplikaciji. Uporabite lahko vgrajeni React prinašati funkcija oz Knjižnica zahtev API, kot je Axios Za ta namen.

Tukaj je primer, kako pridobiti in prikazati sliko iz oddaljenega API-ja z uporabo prinašati funkcija:

konst [imageUri, setImageUri] = useState(nič);
useEffect(() => {
 prinesi (' https://example.com/api/images/1')
 .potem(odgovor => response.json())
 .potem(podatke => setImageUri (data.url))
 .catch(napaka =>konzola.error (napaka));
}, []);
vrnitev (

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

Zagon te kode v vaši aplikaciji bo pridobil sliko iz nastavljene oddaljene povezave API. Primer najprej ustvari spremenljivko stanja za imageUri. Znotraj a useEffect kavelj, prinašati funkcija pridobi imageUri in ga shrani v spremenljivko stanja z uporabo setImageUri().

Končno prikaže Slika komponento z vir prop nastavljen na URI slike, medtem ko se prikaže indikator nalaganja in čaka, da se prikaže slika.

Uporaba predloga pravilnika predpomnilnika za nadzor vedenja predpomnilnika

Vaš brskalnik lahko predpomni slike, ki jih naloži z oddaljenih URL-jev, tako da jih lahko v prihodnosti hitro znova naloži. Obnašanje predpomnjene slike lahko prilagodite z uporabo predpomnilnik prop. Ta predlog lahko določi, kako naj brskalnik predpomni sliko in kako naj razveljavi ta predpomnilnik.

Predpomnilnik lahko sprejme vrednosti, kot so privzeto, ponovno naloži, vsili predpomnilnik, in le-če-predpomnilnik.

Tukaj je primer, kako uporabiti predpomnilnik prop za nadzor obnašanja predpomnilnika slike:

 vir={{
 uri: ' https://example.com/images/my-image.png',
 predpomnilnik: 'force-cache',
 cacheKey: 'moja-podoba',
 nespremenljivo: prav
 }}
/>

The predpomnilnik lastnost je nastavljena na 'force-cache', kar pomeni, da mora brskalnik naložiti sliko iz predpomnilnika, če je na voljo, tudi če je ta različica predpomnilnika stara.

Nov rekvizit cacheKey je v igri tudi tukaj. Nastavljen je na 'moja-podoba', ki bo služil kot ključ predpomnilnika po meri, ki ga lahko pozneje uporabite za sklicevanje na predpomnjeno sliko.

Tudi, nespremenljiv lastnost je nastavljena na prav, ki brskalniku pove, naj ta vnos v predpomnilnik obravnava kot nespremenljiv in ga nikoli ne razveljavi.

Vse o slikah

Komponenta React Native Image zagotavlja zmogljiva in prilagodljiva sredstva za prikazovanje slik, vključno s slogom, upravljanjem oddaljenih slik in nadzorom vedenja predpomnilnika.

Za oddaljene slike lahko vedno uporabite ogrado za prikaz začasne slike ali besedila, medtem ko se oddaljena slika nalaga. To bo ustvarilo boljšo uporabniško izkušnjo, saj bo zagotovilo takojšnje vizualne povratne informacije in preprečilo, da bi aplikacija delovala neodzivno.