Obrázky sa dajú jednoducho pridať do aplikácie React Native. Získajte všetky výhody a nevýhody vstavaného komponentu Image.

Obrázky poskytujú mobilným aplikáciám veľkú hodnotu. Môžu pomôcť ilustrovať koncepty, sprostredkovať informácie, vytvoriť vizuálny záujem a poskytnúť kontext pre konkrétny obsah, ktorý možno nechcete, aby používatelia vašej aplikácie unikli.

Komponent React Native Image Component

Komponent obrázkov React Native je predvolený komponent poskytovaný knižnicou React Native na vykresľovanie obrázkov vo vašich mobilných aplikáciách. Komponent dokáže načítať obrázky z lokálnych aj vzdialených zdrojov. Poskytuje niekoľko rekvizít na prispôsobenie a styling vykreslených obrázkov.

Ak chcete vo svojej aplikácii použiť komponent obrazu, importujte Obrázok z reaktantný knižnica:

importovať Reagovať od'reagovať';
importovať { StyleSheet, Image, View } od„react-native“;
konšt Aplikácia = () => {
vrátiť (

 style={styles.image}
 zdroj={vyžadovať('./assets/my-image.jpg')}
 />
 </View>
 );
};
konšt





instagram viewer

 styles = StyleSheet.create({
 kontajner: {
 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 obrázok: {
 šírka: 200,
 výška: 200,
 border Radius: 100,
 },
});

Vyššie je jednoduché App komponent s obrázkom. The Obrázok komponent trvá a štýl rekvizita, ktorá nastavuje šírka, výška, a borderRadius obrazu. Tiež to trvá a zdroj prop, ktorý načíta obrázok z lokálneho súboru umiestneného v priečinku „assets“ v adresári aplikácie. The zdroj prop definuje cestu k obrázku, ktorý sa má zahrnúť, a môže akceptovať lokálne aj sieťové/vzdialené zdroje obrázkov.

Miestne obrázky sú dostupné na zariadení používateľa a môžete ich dočasne alebo trvalo uložiť. Lokálne obrázky môžete ukladať do adresára projektu aplikácie, ako je napr aktíva priečinok. Obrázky môžete nájsť aj mimo adresára aplikácie, napríklad v priečinku fotoaparátu alebo v knižnici fotografií. Tu je príklad zdrojovej cesty k lokálnemu obrázku:

uri: 'file:///cesta/k/môjmu-obrázku.jpg' }} />

Sieťové obrázky sa dodávajú cez web. Môžu zahŕňať adresy URL HTTP/HTTPS alebo identifikátory URI údajov kódované v base64, ktoré vkladajú údaje priamo do adresy URL pomocou schémy kódovania Base64.

Rekvizity na prispôsobenie obrazového komponentu

Existuje niekoľko rekvizít, ktoré môžete použiť na štýl a prispôsobenie komponentu React Native Image.

resizeMode

The resizeMode prop určuje, ako má React zmeniť veľkosť a umiestnenie obrázka v kontajneri. Existuje niekoľko dostupných hodnôt pre resizeMode, z ktorých každá ovplyvní obrázok inak.

  • kryt: Táto hodnota rovnomerne zmení mierku obrázka tak, že obidva rozmery budú rovnaké alebo väčšie ako prvok, ktorý obsahuje. Obrázok sa potom vycentruje v kontajneri. Použitie tejto hodnoty môže viesť k orezaniu obrázka, aby sa zachoval pomer strán.
  • obsahujú: Toto sa pokúsi dokonale prispôsobiť a vycentrovať obrázok v rámci rozmerov kontajnera. To však môže mať za následok prázdny priestor okolo okrajov obrázka.
  • natiahnuť: The natiahnuť hodnota roztiahne obrázok tak, aby vyplnil celý kontajner bez ohľadu na pomer strán. Niekedy spôsobuje skreslenie obrazu.
  • opakovať: Táto hodnota zopakuje obrázok horizontálne aj vertikálne, aby vyplnil celý kontajner.
  • stred: Toto vycentruje obrázok v prvku kontajnera bez toho, aby sa zmenila jeho mierka.

onLoad

Toto je funkcia spätného volania ktorý sa spustí po dokončení načítania obrázka. Môžete ho použiť na vykonávanie akcií po načítaní obrazu, ako je aktualizácia stavu komponentu alebo zobrazenie správy používateľovi.

onError

The onError prop sa spustí, ak alebo keď sa obrázok nepodarí načítať. Poskytuje spôsob, ako vykonať potrebné akcie, ak sa pri pokuse o načítanie obrázka vyskytne chyba. Používateľovi môžete zobraziť chybové hlásenie alebo sa môžete pokúsiť načítať obrázok znova.

defaultSource

Táto podpera určuje záložný obrázok, ktorý sa zobrazí, ak sa nepodarí načítať hlavný obrázok. Môžete ho použiť na poskytnutie predvoleného obrázka alebo zástupného obrázka počas načítavania hlavného obrázka.

Spracovanie vzdialených obrázkov z API

Možno budete musieť získať obrázok svojej aplikácie z rozhrania API alebo vzdialeného servera a zobraziť ho vo svojej aplikácii. Môžete použiť vstavaný React aport funkcia alebo an API požaduje knižnicu ako Axios pre tento účel.

Tu je príklad, ako načítať a zobraziť obrázok zo vzdialeného API pomocou aport funkcia:

konšt [imageUri, setImageUri] = useState(nulový);
useEffect(() => {
 priniesť (' https://example.com/api/images/1')
 .potom(odpoveď => response.json())
 .potom(údajov => setImageUri (data.url))
 .catch(chyba =>konzoly.chyba (chyba));
}, []);
vrátiť (

 {imageUri? (
uri: imageUri }} />
 ): (
Načítavam...</Text>
 )}
 </View>
);

Spustenie tohto kódu vo vašej aplikácii načíta obrázok z nastaveného vzdialeného odkazu API. Príklad najprv vytvorí stavovú premennú pre imageUri. V rámci a useEffect hák, aport funkcia získa imageUri a uloží ho do stavovej premennej pomocou setImageUri().

Nakoniec vykreslí Obrázok komponent s zdroj rekvizita je nastavená na URI obrázka, zatiaľ čo sa zobrazuje indikátor načítania a čaká sa na zobrazenie obrázka.

Používanie politiky vyrovnávacej pamäte na riadenie správania vyrovnávacej pamäte

Váš prehliadač môže ukladať obrázky, ktoré načítava zo vzdialených adries URL, do vyrovnávacej pamäte, takže ich môže v budúcnosti rýchlo znova načítať. Správanie obrázka vo vyrovnávacej pamäti môžete prispôsobiť pomocou cache rekvizita. Táto podpera môže určiť, ako má prehliadač uložiť obrázok do vyrovnávacej pamäte a ako má túto vyrovnávaciu pamäť zneplatniť.

Prop vyrovnávacej pamäte môže nadobúdať hodnoty ako default, reload, force-cache, a iba ak sa uloží do vyrovnávacej pamäte.

Tu je príklad, ako použiť cache podpera na ovládanie správania obrázka vo vyrovnávacej pamäti:

 zdroj={{
 uri: ' https://example.com/images/my-image.png',
 vyrovnávacia pamäť: 'force-cache',
 cacheKey: 'môj-image',
 nemenný: pravda
 }}
/>

The cache vlastnosť je nastavená na 'force-cache', čo znamená, že prehliadač by mal načítať obrázok z vyrovnávacej pamäte, ak je k dispozícii, aj keď je táto verzia vyrovnávacej pamäte stará.

Nová rekvizita cacheKey hrá sa aj tu. Je nastavený na 'môj-image', ktorý bude slúžiť ako vlastný kľúč vyrovnávacej pamäte, ktorý môžete neskôr použiť na odkazovanie na obrázok uložený vo vyrovnávacej pamäti.

Tiež, nemenný vlastnosť je nastavená na pravda, ktorý hovorí prehliadaču, aby s týmto záznamom vyrovnávacej pamäte zaobchádzal ako s nemenným a nikdy ho nezrušil.

Všetko o obrázkoch

Komponent React Native Image poskytuje výkonný a flexibilný prostriedok na zobrazovanie obrázkov vrátane úpravy štýlu, spracovania vzdialených obrázkov a ovládania správania vyrovnávacej pamäte.

Pre vzdialené obrázky môžete vždy použiť zástupný symbol na zobrazenie dočasného obrázka alebo textu počas načítavania vzdialeného obrázka. To vytvorí lepšiu používateľskú skúsenosť tým, že poskytne okamžitú vizuálnu spätnú väzbu a zabráni tomu, aby aplikácia nereagovala.