Bilder er enkle å legge til i React Native-appen din. Få alle ins og outs på den innebygde bildekomponenten.

Bilder gir mye verdi til mobilapplikasjoner. De kan bidra til å illustrere konsepter, formidle informasjon, skape visuell interesse og gi kontekst for spesifikt innhold du kanskje ikke vil at appbrukerne skal gå glipp av.

React Native Image-komponenten

React Native-bildekomponenten er standardkomponenten levert av React Native-biblioteket for å gjengi bilder i mobilappene dine. Komponenten kan laste inn bilder fra både lokale og eksterne kilder. Det gir flere rekvisitter for tilpasning og styling av bildene som gjengis.

Importer for å bruke bildekomponenten i applikasjonen Bilde fra reagere innfødt bibliotek:

import Reagere fra'reagere';
import { StyleSheet, Image, View } fra'reager-innfødt';
konst App = () => {
komme tilbake (

 style={styles.image}
 kilde={krever('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {
 flex: 1,
 alignItems: 'senter',
 justifyContent: 'senter',
 },
 bilde: {
 bredde: 200,
 høyde: 200,
 borderRadius: 100,
 },
});

Ovenfor er en enkel App komponent med et bilde. De Bilde komponent tar en stil rekvisitt som setter bredde, høyde, og borderRadius av bildet. Det tar også en kilde prop som laster bildet fra en lokal fil som ligger i "assets"-mappen i appkatalogen. De kilde prop definerer banen til bildet som skal inkluderes og kan godta både lokale og nettverks-/eksterne bildekilder.

Lokale bilder er tilgjengelige på enheten til brukeren, og du kan lagre dem enten midlertidig eller permanent. Du kan lagre lokale bilder i appens prosjektkatalog, for eksempel en eiendeler mappe. Du kan også finne bilder utenfor appens katalog, for eksempel i enhetens kamerarull eller bildebibliotek. Her er et eksempel på en kildebane til et lokalt bilde:

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

Nettverksbilder leveres via nettet. De kan inkludere HTTP/HTTPS URL-er eller base64-kodede data-URIer, som bygger inn data direkte i URL-en ved hjelp av Base64-kodingsskjemaet.

Rekvisitter for å tilpasse bildekomponenten

Det er flere rekvisitter du kan bruke til å style og tilpasse React Native Image-komponenten.

endre størrelsesmodus

De endre størrelsesmodus prop bestemmer hvordan React skal endre størrelse og plassere et bilde i beholderen. Det er flere tilgjengelige verdier for endre størrelsesmodus, som hver vil påvirke bildet forskjellig.

  • dekke: Denne verdien skalerer bildet jevnt slik at begge dimensjonene er lik eller større enn innholdselementet. Bildet blir deretter sentrert i beholderen. Bruk av denne verdien kan resultere i at bildet beskjæres for å opprettholde sideforholdet.
  • inneholde: Dette vil forsøke å passe og sentrere bildet perfekt innenfor dimensjonene til beholderen. Dette kan imidlertid føre til tom plass rundt kantene på bildet.
  • tøye ut: Den tøye ut verdi strekker bildet til å fylle hele beholderen, uavhengig av sideforhold. Noen ganger får bildet til å forvrenges.
  • gjenta: Denne verdien gjentar bildet både horisontalt og vertikalt for å fylle hele beholderen.
  • senter: Dette vil sentrere bildet i beholderelementet uten å skalere det.

på Last

Dette er en tilbakeringingsfunksjon som kjører når bildet er ferdig lastet. Du kan bruke den til å utføre handlinger etter at bildet er lastet inn, for eksempel å oppdatere tilstanden til komponenten eller vise en melding til brukeren.

onFeil

De onFeil prop vil kjøre hvis eller når bildet ikke lar seg laste. Det gir en måte å utføre nødvendige handlinger hvis det oppstår en feil under forsøk på å laste inn bildet. Du kan vise en feilmelding til brukeren eller prøve å laste inn bildet på nytt.

defaultSource

Denne rekvisiten spesifiserer et reservebilde som skal vises hvis hovedbildet ikke kan lastes. Du kan bruke den til å gi et standardbilde eller et plassholderbilde mens hovedbildet lastes inn.

Håndtering av eksterne bilder fra et API

Du må kanskje hente bildet for applikasjonen din fra en API eller ekstern server og vise det i appen din. Du kan bruke den innebygde React hente funksjon eller en API-forespørselsbibliotek som Axios for dette formålet.

Her er et eksempel på hvordan du henter og viser et bilde fra en ekstern API ved hjelp av hente funksjon:

konst [imageUri, setImageUri] = useState(null);
useEffect(() => {
 hente(' https://example.com/api/images/1')
 .deretter(respons => response.json())
 .deretter(data => setImageUri (data.url))
 .å fange(feil =>konsoll.feil (feil));
}, []);
komme tilbake (

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

Hvis du kjører denne koden i appen din, hentes et bilde fra den angitte eksterne API-koblingen. Eksemplet oppretter først en tilstandsvariabel for imageUri. Innenfor en useEffect krok, den hente funksjonen henter imageUri og lagrer den i tilstandsvariabelen ved hjelp av setImageUri().

Til slutt gjengir det Bilde komponent med kilde prop satt til URI-en til bildet mens en lasteindikator vises og venter på at bildet skal vises.

Bruke Cache Policy Prop for å kontrollere Cache Behavior

Nettleseren din kan hurtigbufre bilder som den laster fra eksterne URL-er, slik at den kan laste dem raskt igjen i fremtiden. Du kan tilpasse oppførselen til det bufrede bildet ved å bruke cache rekvisitt. Denne rekvisiten kan spesifisere hvordan en nettleser skal cache bildet og hvordan den skal ugyldiggjøre den cachen.

Hurtigbufferen kan ta verdier som default, reload, force-cache, og bare-hvis-bufret.

Her er et eksempel på hvordan du bruker cache prop for å kontrollere hurtigbufferen til et bilde:

 kilde={{
 uri: ' https://example.com/images/my-image.png',
 cache: "force-cache",
 cachekey: "mitt bilde",
 uforanderlig: ekte
 }}
/>

De cache egenskapen er satt til "force-cache", som indikerer at nettleseren skal laste inn bildet fra hurtigbufferen hvis det er tilgjengelig, selv om den hurtigbufferversjonen er gammel.

En ny rekvisitt cacheKey er også i spill her. Den er satt til "mitt bilde", som vil fungere som en egendefinert hurtigbuffernøkkel som du kan bruke til å referere til det bufrede bildet senere.

Også uforanderlig egenskapen er satt til ekte, som forteller nettleseren å behandle denne bufferoppføringen som uforanderlig og aldri ugyldiggjøre den.

Alt som finnes om bilder

React Native Image-komponenten gir en kraftig og fleksibel måte å vise bilder, inkludert styling, håndtering av eksterne bilder og kontroll av cache-atferd.

For eksterne bilder kan du alltid bruke en plassholder for å vise et midlertidig bilde eller tekst mens det eksterne bildet lastes inn. Dette vil skape en bedre brukeropplevelse ved å gi umiddelbar visuell tilbakemelding og forhindre at appen ser ut som den ikke svarer.