Billeder er nemme at tilføje til din React Native-app. Få alle ins og outs på den indbyggede Image-komponent.

Billeder giver masser af værdi til mobilapplikationer. De kan hjælpe med at illustrere koncepter, formidle information, skabe visuel interesse og give kontekst for specifikt indhold, som du måske ikke ønsker, at dine appbrugere skal gå glip af.

React Native Image-komponenten

React Native-billedkomponenten er standardkomponenten leveret af React Native-biblioteket til at gengive billeder i dine mobilapps. Komponenten kan indlæse billeder fra både lokale og eksterne kilder. Det giver flere rekvisitter til tilpasning og styling af de gengivede billeder.

Importer for at bruge billedkomponenten i din applikation Billede fra reagere-native bibliotek:

importere Reagere fra'reagere';
importere { StyleSheet, Image, View } fra'reager-native';
konst App = () => {
Vend tilbage (

 style={styles.image}
 kilde={kræve('./assets/mit-billede.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({
 beholder: {





instagram viewer



 flex: 1,
 alignItems: 'centrum',
 justifyContent: 'centrum',
 },
 billede: {
 bredde: 200,
 højde: 200,
 borderRadius: 100,
 },
});

Ovenstående er en simpel App komponent med et billede. Det Billede komponent tager en stil rekvisit, der sætter bredde, højde, og grænseRadius af billedet. Det tager også en kilde prop, der indlæser billedet fra en lokal fil placeret i mappen "aktiver" i app-mappen. Det kilde prop definerer stien til billedet, der skal inkluderes, og kan acceptere både lokale og netværks-/fjernbilledkilder.

Lokale billeder er tilgængelige på brugerens enhed, og du kan gemme dem enten midlertidigt eller permanent. Du kan gemme lokale billeder i appens projektmappe, såsom en aktiver folder. Du kan også finde billeder uden for appens bibliotek, f.eks. i enhedens kamerarulle eller fotobibliotek. Her er et eksempel på en kildesti til et lokalt billede:

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

Netværksbilleder leveres via nettet. De kunne omfatte HTTP/HTTPS-URL'er eller base64-kodede data-URI'er, som indlejrer data direkte i URL'en ved hjælp af Base64-kodningsskemaet.

Rekvisitter til at tilpasse billedkomponenten

Der er flere rekvisitter, du kan bruge til at style og tilpasse React Native Image-komponenten.

resizeMode

Det resizeMode prop bestemmer, hvordan React skal ændre størrelse og placere et billede i dets beholder. Der er flere tilgængelige værdier for resizeMode, som hver især vil påvirke billedet forskelligt.

  • dække over: Denne værdi skalerer billedet ensartet, så begge dimensioner er lig med eller større end dets indholdselement. Billedet centreres derefter i beholderen. Brug af denne værdi kan resultere i, at billedet beskæres for at bevare billedformatet.
  • indeholde: Dette vil forsøge at passe og centrere billedet perfekt inden for beholderens dimensioner. Dette kan dog resultere i tom plads rundt om billedets kanter.
  • strække: Det strække værdi strækker billedet til at fylde hele beholderen, uanset billedformat. Nogle gange får billedet til at forvrænge.
  • gentage: Denne værdi gentager billedet både vandret og lodret for at fylde hele beholderen.
  • centrum: Dette vil centrere billedet i beholderelementet uden at skalere det.

onLoad

Dette er en tilbagekaldsfunktion der kører, når billedet er færdig med at indlæse. Du kan bruge det til at udføre handlinger efter billedet er indlæst, såsom at opdatere komponentens tilstand eller vise en besked til brugeren.

onFejl

Det onFejl prop vil køre, hvis eller når billedet ikke indlæses. Det giver en måde at udføre nødvendige handlinger på, hvis der er en fejl under forsøget på at indlæse billedet. Du kan vise en fejlmeddelelse til brugeren eller prøve at indlæse billedet igen.

defaultSource

Denne prop angiver et reservebillede, der skal vises, hvis hovedbilledet ikke indlæses. Du kan bruge det til at give et standardbillede eller et pladsholderbillede, mens hovedbilledet indlæses.

Håndtering af fjernbilleder fra en API

Du skal muligvis hente billedet til din applikation fra en API eller fjernserver og vise det i din app. Du kan bruge den indbyggede React hente funktion eller en API-anmodningsbibliotek som Axios til dette formål.

Her er et eksempel på, hvordan man henter og viser et billede fra en ekstern API ved hjælp af hente fungere:

konst [imageUri, setImageUri] = useState(nul);
useEffect(() => {
 hente(' https://example.com/api/images/1')
 .derefter(respons => response.json())
 .derefter(data => setImageUri (data.url))
 .fangst(fejl =>konsol.fejl (fejl));
}, []);
Vend tilbage (

 {imageUri? (
uri: imageUri }} />
 ): (
Indlæser...</Text>
 )}
 </View>
);

Hvis du kører denne kode i din app, hentes et billede fra det indstillede fjern-API-link. Eksemplet opretter først en tilstandsvariabel for billedeUri. Inden for en useEffect krog, den hente funktionen henter imageUri og gemmer den i tilstandsvariablen vha setImageUri().

Endelig gengiver det Billede komponent med kilde prop indstillet til billedets URI, mens en indlæsningsindikator vises og venter på, at billedet vises.

Brug af Cache Policy Prop til at kontrollere cache-adfærd

Din browser kan cache billeder, som den indlæser fra eksterne URL'er, så den kan indlæse dem hurtigt igen i fremtiden. Du kan tilpasse adfærden af ​​det cachelagrede billede ved hjælp af cache rekvisit. Denne prop kan specificere, hvordan en browser skal cache billedet, og hvordan den skal ugyldiggøre denne cache.

Cache-propen kan tage værdier som default, genindlæs, force-cache, og kun-hvis-cache.

Her er et eksempel på, hvordan du bruger cache prop til at kontrollere cache-adfærden for et billede:

 kilde={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'force-cache',
 cacheNøgle: 'mit-billede',
 uforanderlig: rigtigt
 }}
/>

Det cache egenskab er indstillet til 'force-cache', hvilket angiver, at browseren skal indlæse billedet fra cachen, hvis det er tilgængeligt, selvom cacheversionen er gammel.

En ny rekvisit cacheNøgle er også i spil her. Den er indstillet til 'mit-billede', som vil fungere som en brugerdefineret cache-nøgle, som du kan bruge til at henvise til det cachelagrede billede senere.

Også den uforanderlig egenskab er indstillet til rigtigt, som fortæller browseren at behandle denne cachepost som uforanderlig og aldrig ugyldiggøre den.

Alt der er om billeder

React Native Image-komponenten giver et kraftfuldt og fleksibelt middel til at vise billeder, herunder styling, håndtering af fjernbilleder og styring af cache-adfærd.

For fjernbilleder kan du altid bruge en pladsholder til at vise et midlertidigt billede eller tekst, mens fjernbilledet indlæses. Dette vil skabe en bedre brugeroplevelse ved at give øjeblikkelig visuel feedback og forhindre, at appen ikke virker.