Obrázky lze snadno přidat do aplikace React Native. Získejte všechny detaily a výhody vestavěné komponenty Image.

Obrázky poskytují mobilním aplikacím velkou hodnotu. Mohou pomoci ilustrovat koncepty, předávat informace, vytvářet vizuální zajímavosti a poskytovat kontext pro konkrétní obsah, který byste si neměli nechat ujít uživatelé vaší aplikace.

Komponenta React Native Image Component

Komponenta obrázku React Native je výchozí komponentou poskytovanou knihovnou React Native k vykreslování obrázků ve vašich mobilních aplikacích. Komponenta může načítat obrázky z místních i vzdálených zdrojů. Poskytuje několik rekvizit pro přizpůsobení a styling vykreslených obrázků.

Chcete-li ve své aplikaci použít komponentu obrazu, importujte obraz z reaktivní knihovna:

import Reagovat z'reagovat';
import { StyleSheet, Image, View } z'react-native';
konst Aplikace = () => {
vrátit se (

 style={styles.image}
 zdroj={vyžadovat('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styly = StyleSheet.create({
 kontejner: {





instagram viewer



 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 obraz: {
 šířka: 200,
 výška: 200,
 okrajRadius: 100,
 },
});

Nahoře je jednoduché Aplikace komponenta s obrázkem. The obraz složka bere a styl rekvizita, která nastavuje šířka, výška, a okrajRadius obrázku. Také to trvá a zdroj prop, který načte obrázek z místního souboru umístěného ve složce „assets“ v adresáři aplikace. The zdroj prop definuje cestu k obrazu, který má být zahrnut, a může přijímat jak místní, tak síťové/vzdálené zdroje obrazu.

Místní obrázky jsou k dispozici na zařízení uživatele a můžete je dočasně nebo trvale uložit. Místní obrázky můžete ukládat do adresáře projektu aplikace, jako je např aktiva složku. Obrázky můžete také najít mimo adresář aplikace, například ve složce fotoaparátu nebo v knihovně fotografií zařízení. Zde je příklad zdrojové cesty k místnímu obrázku:

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

Síťové obrázky jsou dodávány prostřednictvím webu. Mohou zahrnovat adresy URL HTTP/HTTPS nebo data URI kódovaná base64, která vkládají data přímo do adresy URL pomocí schématu kódování Base64.

Pomůcky pro přizpůsobení obrazové komponenty

Existuje několik rekvizit, které můžete použít ke stylování a přizpůsobení komponenty React Native Image.

resizeMode

The resizeMode prop určuje, jak má React změnit velikost a umístění obrázku ve svém kontejneru. Existuje několik dostupných hodnot pro resizeMode, z nichž každý ovlivní obrázek jinak.

  • Pokrýt: Tato hodnota změní měřítko obrázku rovnoměrně tak, aby oba rozměry byly stejné nebo větší než jeho obsahující prvek. Obrázek je pak vycentrován uvnitř kontejneru. Použití této hodnoty může vést k oříznutí obrázku, aby byl zachován poměr stran.
  • obsahovat: Toto se pokusí dokonale přizpůsobit a vycentrovat obrázek v rámci rozměrů kontejneru. To však může mít za následek prázdný prostor kolem okrajů obrázku.
  • protáhnout se: The protáhnout se hodnota roztáhne obraz tak, aby vyplnil celý kontejner, bez ohledu na poměr stran. Někdy způsobí zkreslení obrazu.
  • opakovat: Tato hodnota zopakuje obraz vodorovně i svisle, aby vyplnil celou nádobu.
  • centrum: Tím se obrázek vycentruje v prvku kontejneru, aniž by se změnila jeho velikost.

onLoad

Toto je a funkce zpětného volání který se spustí, když se obrázek dokončí načítání. Můžete jej použít k provádění akcí po načtení obrazu, jako je aktualizace stavu komponenty nebo zobrazení zprávy uživateli.

onError

The onError prop se spustí, pokud nebo když se nepodaří načíst obrázek. Poskytuje způsob, jak provést potřebné akce, pokud při pokusu o načtení obrázku dojde k chybě. Můžete uživateli zobrazit chybovou zprávu nebo se pokusit načíst obrázek znovu.

defaultSource

Tato prop určuje záložní obrázek, který se zobrazí, pokud se nepodaří načíst hlavní obrázek. Můžete jej použít k poskytnutí výchozího obrázku nebo zástupného obrázku při načítání hlavního obrázku.

Zpracování vzdálených obrázků z API

Možná budete muset získat obrázek pro vaši aplikaci z rozhraní API nebo vzdáleného serveru a zobrazit jej ve vaší aplikaci. Můžete použít vestavěný React vynést funkce nebo an Knihovna požadavků API jako Axios pro tento účel.

Zde je příklad, jak načíst a zobrazit obrázek ze vzdáleného API pomocí vynést funkce:

konst [imageUri, setImageUri] = useState(nula);
useEffect(() => {
 vynést(' https://example.com/api/images/1')
 .pak(Odezva => response.json())
 .pak(data => setImageUri (data.url))
 .chytit(chyba =>řídicí panel.chyba (chyba));
}, []);
vrátit se (

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

Spuštěním tohoto kódu ve vaší aplikaci se načte obrázek z nastaveného vzdáleného odkazu API. Příklad nejprve vytvoří stavovou proměnnou pro imageUri. V rámci a useEffect háček, vynést funkce načte imageUri a uloží jej do stavové proměnné pomocí setImageUri().

Nakonec vykreslí obraz komponenta s zdroj prop nastavena na URI obrázku, zatímco se zobrazuje indikátor načítání a čeká, až se obrázek zobrazí.

Použití zásady mezipaměti k řízení chování mezipaměti

Váš prohlížeč může ukládat obrázky, které načítá ze vzdálených adres URL, do mezipaměti, takže je může v budoucnu rychle znovu načítat. Chování obrázku uloženého v mezipaměti můžete přizpůsobit pomocí mezipaměti podpěra. Tato podložka může určit, jak by měl prohlížeč ukládat obrázek do mezipaměti a jak by měl tuto mezipaměť zneplatnit.

Prop cache může nabývat hodnot jako default, reload, force-cache, a pouze v mezipaměti.

Zde je příklad, jak použít mezipaměti prop pro ovládání chování obrázku v mezipaměti:

 zdroj={{
 uri: ' https://example.com/images/my-image.png',
 mezipaměti: 'force-cache',
 cacheKey: 'můj obrázek',
 neměnný: skutečný
 }}
/>

The mezipaměti vlastnost je nastavena na 'force-cache', což znamená, že prohlížeč by měl načíst obrázek z mezipaměti, pokud je k dispozici, i když je tato verze mezipaměti stará.

Nová rekvizita cacheKey je zde také ve hře. Je nastaveno na 'můj obrázek', který bude sloužit jako vlastní klíč mezipaměti, který můžete později použít k odkazování na obrázek uložený v mezipaměti.

Také neměnný vlastnost je nastavena na skutečný, který říká prohlížeči, aby s tímto záznamem mezipaměti zacházel jako s neměnným a nikdy jej nezrušil.

Vše, co je o obrázcích

Komponenta React Native Image poskytuje výkonné a flexibilní prostředky pro zobrazování obrázků, včetně stylingu, zpracování vzdálených obrázků a řízení chování mezipaměti.

U vzdálených obrázků můžete vždy použít zástupný symbol pro zobrazení dočasného obrázku nebo textu, zatímco se vzdálený obrázek načítá. To vytvoří lepší uživatelský zážitek tím, že poskytne okamžitou vizuální zpětnou vazbu a zabrání tomu, aby aplikace nereagovala.