Bilder är lätta att lägga till i din React Native-app. Få alla ins och outs på den inbyggda Image-komponenten.

Bilder ger massor av värde för mobila applikationer. De kan hjälpa till att illustrera koncept, förmedla information, skapa visuellt intresse och ge sammanhang för specifikt innehåll som du kanske inte vill att dina appanvändare ska missa.

React Native Image-komponenten

React Native-bildkomponenten är standardkomponenten som tillhandahålls av React Native-biblioteket för att rendera bilder i dina mobilappar. Komponenten kan ladda bilder från både lokala och fjärranslutna källor. Det tillhandahåller flera rekvisita för anpassning och styling av de återgivna bilderna.

Importera om du vill använda bildkomponenten i din applikation Bild från reagera-native bibliotek:

importera Reagera från'reagera';
importera { StyleSheet, Image, View } från"reagera-native";
konst App = () => {
lämna tillbaka (

 style={styles.image}
 source={behöva('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({





instagram viewer



 behållare: {
 böja: 1,
 alignItems: 'Centrum',
 justifyContent: 'Centrum',
 },
 bild: {
 bredd: 200,
 höjd: 200,
 borderRadius: 100,
 },
});

Ovan är en enkel App komponent med en bild. De Bild komponent tar en stil rekvisita som ställer in bredd, höjd, och borderRadius av bilden. Det tar också en källa prop som laddar bilden från en lokal fil som finns i mappen "tillgångar" i appkatalogen. De källa prop definierar sökvägen till bilden som ska inkluderas och kan acceptera både lokala och nätverks-/fjärrbildskällor.

Lokala bilder är tillgängliga på användarens enhet och du kan lagra dem antingen tillfälligt eller permanent. Du kan lagra lokala bilder i appens projektkatalog, till exempel en tillgångar mapp. Du kan också hitta bilder utanför appens katalog, till exempel i enhetens kamerarulle eller fotobibliotek. Här är ett exempel på en källsökväg till en lokal bild:

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

Nätverksbilder levereras via webben. De kan inkludera HTTP/HTTPS-URL: er eller base64-kodade data-URI: er, som bäddar in data direkt i URL: en med hjälp av Base64-kodningsschemat.

Rekvisita för att anpassa bildkomponenten

Det finns flera rekvisita du kan använda för att styla och anpassa React Native Image-komponenten.

ändra storleksläge

De ändra storleksläge prop bestämmer hur React ska ändra storlek och placera en bild i dess behållare. Det finns flera tillgängliga värden för ändra storleksläge, som var och en kommer att påverka bilden på olika sätt.

  • omslag: Detta värde kommer att skala bilden enhetligt så att båda dimensionerna är lika med eller större än dess innehållselement. Bilden centreras sedan i behållaren. Användning av detta värde kan resultera i att bilden beskärs för att bibehålla bildförhållandet.
  • innehålla: Detta kommer att försöka passa in och centrera bilden perfekt inom behållarens mått. Detta kan dock resultera i tomt utrymme runt bildens kanter.
  • sträcka: Den sträcka värde sträcker ut bilden så att den fyller hela behållaren, oavsett bildförhållande. Ibland får bilden att förvrängas.
  • upprepa: Detta värde upprepar bilden både horisontellt och vertikalt för att fylla hela behållaren.
  • Centrum: Detta kommer att centrera bilden i behållarelementet utan att skala den.

onLoad

Det här är en återuppringningsfunktion som körs när bilden är klar. Du kan använda den för att utföra åtgärder efter att bilden har laddats, som att uppdatera komponentens tillstånd eller visa ett meddelande för användaren.

onError

De onError prop kommer att köras om eller när bilden inte kan laddas. Det ger ett sätt att utföra nödvändiga åtgärder om det uppstår ett fel när du försöker ladda bilden. Du kan visa ett felmeddelande för användaren eller försöka ladda bilden igen.

defaultSource

Denna prop anger en reservbild som ska visas om huvudbilden inte kan laddas. Du kan använda den för att tillhandahålla en standardbild eller en platshållarbild medan huvudbilden laddas.

Hantera fjärrbilder från ett API

Du kan behöva hämta bilden för din applikation från ett API eller en fjärrserver och visa den i din app. Du kan använda den inbyggda React hämta funktion eller en API-förfrågningsbibliotek som Axios för det här syftet.

Här är ett exempel på hur man hämtar och visar en bild från ett fjärr-API med hjälp av hämta fungera:

konst [imageUri, setImageUri] = useState(null);
useEffect(() => {
 hämta(' https://example.com/api/images/1')
 .sedan(svar => response.json())
 .sedan(data => setImageUri (data.url))
 .fånga(fel =>trösta.error (fel));
}, []);
lämna tillbaka (

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

Om du kör den här koden i din app hämtas en bild från den inställda fjärranslutna API-länken. Exemplet skapar först en tillståndsvariabel för bildUri. Inom en useEffect krok, den hämta funktionen hämtar imageUri och lagrar den i tillståndsvariabeln med hjälp av setImageUri().

Slutligen återger det Bild komponent med källa prop inställd på bildens URI medan en laddningsindikator visas och väntar på att bilden ska visas.

Använda Cache Policy Prop för att kontrollera Cache Beteende

Din webbläsare kan cachelagra bilder som den laddar från fjärradresser, så att den snabbt kan ladda dem igen i framtiden. Du kan anpassa beteendet för den cachade bilden med hjälp av cache stötta. Denna prop kan specificera hur en webbläsare ska cache bilden och hur den ska ogiltigförklara den cachen.

Cacheminnet kan ta värden som default, reload, force-cache, och endast-om-cache.

Här är ett exempel på hur man använder cache prop för att kontrollera cachebeteendet för en bild:

 source={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'force-cache',
 cacheKey: 'min-bild',
 oföränderlig: Sann
 }}
/>

De cache egenskapen är inställd på 'force-cache', vilket indikerar att webbläsaren ska ladda bilden från cachen om den är tillgänglig, även om den cacheversionen är gammal.

En ny rekvisita cacheKey är också i spel här. Den är inställd på 'min-bild', som kommer att fungera som en anpassad cache-nyckel som du kan använda för att referera till den cachade bilden senare.

Även oföränderlig egenskapen är inställd på Sann, som säger åt webbläsaren att behandla denna cachepost som oföränderlig och aldrig ogiltigförklara den.

Allt som finns om bilder

React Native Image-komponenten ger ett kraftfullt och flexibelt sätt att visa bilder, inklusive styling, hantering av fjärrbilder och kontroll av cachebeteende.

För fjärrbilder kan du alltid använda en platshållare för att visa en tillfällig bild eller text medan fjärrbilden laddas. Detta kommer att skapa en bättre användarupplevelse genom att ge omedelbar visuell feedback och förhindra att appen inte svarar.