Afbeeldingen zijn eenvoudig toe te voegen aan uw React Native app. Krijg alle ins en outs over de ingebouwde Image-component.

Afbeeldingen bieden veel waarde voor mobiele applicaties. Ze kunnen helpen bij het illustreren van concepten, het overbrengen van informatie, het creëren van visuele interesse en het bieden van context voor specifieke inhoud waarvan u niet wilt dat uw app-gebruikers deze missen.

De React Native Image-component

De React Native-afbeeldingscomponent is de standaardcomponent die door de React Native-bibliotheek wordt geleverd om afbeeldingen in uw mobiele apps weer te geven. De component kan afbeeldingen laden van zowel lokale als externe bronnen. Het biedt verschillende rekwisieten voor aanpassing en styling van de weergegeven afbeeldingen.

Om de afbeeldingscomponent in uw toepassing te gebruiken, importeert u Afbeelding van de reactief bibliotheek:

importeren Reageer van'Reageer';
importeren { StyleSheet, afbeelding, weergave } van'reageren-native';
const App= () => {
opbrengst
 (

 style={stijlen.afbeelding}
 bron={vereisen('./assets/mijn-afbeelding.jpg')}
 />
 </View>
 );
};
const stijlen = StyleSheet.create({
 houder: {
 buigen: 1,
 uitlijnenItems: 'centrum',
 rechtvaardigenInhoud: 'centrum',
 },
 afbeelding: {
 breedte: 200,
 hoogte: 200,
 borderRadius: 100,
 },
});

Hierboven is een simpele app onderdeel met een afbeelding. De Afbeelding onderdeel duurt een stijl prop die de breedte, hoogte, En borderRadius van de afbeelding. Het duurt ook een bron prop die de afbeelding laadt vanuit een lokaal bestand in de map "assets" in de app-directory. De bron prop definieert het pad van de afbeelding die moet worden opgenomen en kan zowel lokale als netwerk/externe afbeeldingsbronnen accepteren.

Lokale afbeeldingen zijn beschikbaar op het apparaat van de gebruiker en u kunt ze tijdelijk of permanent opslaan. U kunt lokale afbeeldingen opslaan in de projectdirectory van de app, zoals een activa map. U kunt ook afbeeldingen zoeken buiten de map van de app, zoals in de filmrol of fotobibliotheek van het apparaat. Hier is een voorbeeld van een bronpad naar een lokale afbeelding:

uri: 'file:///pad/naar/mijn-afbeelding.jpg' }} />

Netwerkbeelden worden geleverd via het web. Ze kunnen HTTP/HTTPS-URL's of base64-gecodeerde gegevens-URI's bevatten, die gegevens rechtstreeks in de URL insluiten met behulp van het Base64-coderingsschema.

Rekwisieten om de afbeeldingscomponent aan te passen

Er zijn verschillende rekwisieten die u kunt gebruiken om de React Native Image-component te stylen en aan te passen.

formaat wijzigenMode

De formaat wijzigenMode prop bepaalt hoe React het formaat en de positie van een afbeelding in de container moet wijzigen. Er zijn verschillende beschikbare waarden voor formaat wijzigenMode, die elk de afbeelding anders zullen beïnvloeden.

  • omslag: Met deze waarde wordt de afbeelding gelijkmatig geschaald, zodat beide dimensies gelijk zijn aan of groter zijn dan het bevattende element. De afbeelding wordt dan gecentreerd in de container. Het gebruik van deze waarde kan ertoe leiden dat de afbeelding wordt bijgesneden om de beeldverhouding te behouden.
  • bevatten: hiermee wordt geprobeerd de afbeelding perfect binnen de afmetingen van de container te passen en te centreren. Dit kan echter resulteren in lege ruimte rond de randen van de afbeelding.
  • rekken: De rekken waarde rekt de afbeelding uit om de hele container te vullen, ongeacht de beeldverhouding. Soms waardoor het beeld vervormt.
  • herhalen: Deze waarde herhaalt de afbeelding zowel horizontaal als verticaal om de hele container te vullen.
  • centrum: hiermee wordt de afbeelding binnen het containerelement gecentreerd zonder deze te schalen.

opLaden

Dit is een terugbelfunctie dat wordt uitgevoerd wanneer de afbeelding klaar is met laden. U kunt het gebruiken om acties uit te voeren nadat de afbeelding is geladen, zoals het bijwerken van de status van het onderdeel of het weergeven van een bericht aan de gebruiker.

opFout

De opFout prop wordt uitgevoerd als of wanneer de afbeelding niet kan worden geladen. Het biedt een manier om de nodige acties uit te voeren als er een fout optreedt tijdens het laden van de afbeelding. U kunt een foutmelding aan de gebruiker weergeven of opnieuw proberen de afbeelding te laden.

defaultBron

Deze prop specificeert een terugvalafbeelding die moet worden weergegeven als de hoofdafbeelding niet kan worden geladen. U kunt het gebruiken om een ​​standaardafbeelding of een tijdelijke aanduiding-afbeelding op te geven terwijl de hoofdafbeelding wordt geladen.

Omgaan met externe afbeeldingen vanuit een API

Mogelijk moet u de afbeelding voor uw toepassing ophalen van een API of externe server en deze in uw app weergeven. U kunt de ingebouwde React gebruiken ophalen functie of een API vraagt ​​bibliotheek aan zoals Axios Voor dit doeleinde.

Hier is een voorbeeld van het ophalen en weergeven van een afbeelding van een externe API met behulp van de ophalen functie:

const [imageUri, setImageUri] = useState(nul);
gebruikEffect(() => {
 ophalen(' https://example.com/api/images/1')
 .Dan(antwoord => reactie.json())
 .Dan(gegevens => setImageUri (data.url))
 .vangst(fout =>troosten.fout (fout));
}, []);
opbrengst (

 {afbeeldingUri? (
uri: afbeeldingUri }} />
 ): (
Bezig met laden...</Text>
 )}
 </View>
);

Als u deze code in uw app uitvoert, wordt een afbeelding opgehaald van de ingestelde externe API-link. In het voorbeeld wordt eerst een statusvariabele gemaakt voor de afbeeldingUri. Binnen een gebruikEffect haak, de ophalen functie haalt de imageUri op en slaat deze op in de state-variabele met behulp van setImageUri().

Ten slotte geeft het de Afbeelding onderdeel met de bron prop ingesteld op de URI van de afbeelding terwijl een laadindicator wordt weergegeven, wachtend tot de afbeelding wordt weergegeven.

De Cache Policy Prop gebruiken om cachegedrag te beheersen

Uw browser kan afbeeldingen cachen die worden geladen vanaf externe URL's, zodat deze in de toekomst snel weer kunnen worden geladen. U kunt het gedrag van de afbeelding in de cache aanpassen met behulp van de cache prop. Deze prop kan specificeren hoe een browser de afbeelding moet cachen en hoe die cache ongeldig moet worden gemaakt.

De cache-prop kan waarden aannemen zoals standaard, herladen, force-cache, En alleen-indien-gecached.

Hier is een voorbeeld van het gebruik van de cache prop om het cachegedrag van een afbeelding te regelen:

 bron={{
 uri: ' https://example.com/images/my-image.png',
 cache: 'force-cache',
 cachesleutel: 'mijn-beeld',
 onveranderlijk: WAAR
 }}
/>

De cache eigenschap is ingesteld op 'force-cache', wat aangeeft dat de browser de afbeelding uit de cache moet laden als deze beschikbaar is, zelfs als die cacheversie oud is.

Een nieuwe prop cacheSleutel speelt hier ook mee. Het is ingesteld op 'mijn-beeld', die zal dienen als een aangepaste cachesleutel die u later kunt gebruiken om naar de afbeelding in de cache te verwijzen.

Ook de onveranderlijk eigenschap is ingesteld op WAAR, die de browser vertelt om dit cache-item als onveranderlijk te behandelen en het nooit ongeldig te maken.

Alles wat er is over afbeeldingen

De React Native Image-component biedt een krachtig en flexibel middel voor het weergeven van afbeeldingen, inclusief styling, het verwerken van externe afbeeldingen en het controleren van cachegedrag.

Voor externe afbeeldingen kunt u altijd een tijdelijke aanduiding gebruiken om een ​​tijdelijke afbeelding of tekst weer te geven terwijl de externe afbeelding wordt geladen. Dit zorgt voor een betere gebruikerservaring door onmiddellijke visuele feedback te geven en te voorkomen dat de app niet meer reageert.