Piltidega töötamine rakenduses React Native

Pildid pakuvad mobiilirakendustele palju väärtust. Need võivad aidata illustreerida kontseptsioone, edastada teavet, tekitada visuaalset huvi ja pakkuda konteksti konkreetsele sisule, millest teie rakenduse kasutajad ei pruugi ilma jääda.

React Native Image Component

Pildikomponent React Native on vaikekomponent, mida pakub React Native'i teegi teie mobiilirakendustes piltide renderdamiseks. Komponent saab laadida pilte nii kohalikest kui ka kaugallikatest. See pakub mitmeid rekvisiite renderdatud piltide kohandamiseks ja kujundamiseks.

Pildikomponendi kasutamiseks oma rakenduses importige Pilt alates reageeriv-native raamatukogu:

importida Reageerige alates'reageeri';
importida { Style Sheet, Image, View } alates'react-native';
konst Rakendus = () => {
tagasi (

 style={styles.image}
 allikas={nõuda('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst styles = StyleSheet.create({
 konteiner: {
 paindumine: 

instagram viewer

1,
 joonda üksused: 'Keskus',
 õigustaSisu: 'Keskus',
 },
 pilt: {
 laius: 200,
 kõrgus: 200,
 piiriraadius: 100,
 },
});

Eespool on lihtne Rakendus pildiga komponent. The Pilt komponent võtab a stiilis prop, mis määrab laius, kõrgusja piiriraadius pildist. Samuti kulub a allikas prop, mis laadib pildi kohalikust failist, mis asub rakenduste kataloogi kaustas "varad". The allikas prop määrab kaasatava pildi tee ja suudab aktsepteerida nii kohalikke kui ka võrgu-/kaugpildiallikaid.

Kohalikud pildid on kasutaja seadmes saadaval ja saate neid ajutiselt või püsivalt salvestada. Saate salvestada rakenduse projektikataloogi kohalikke pilte, näiteks varasid kausta. Saate otsida pilte ka väljaspool rakenduse kataloogi, näiteks seadme kaamera rullis või fototeegis. Siin on näide kohaliku pildi lähteteest:

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

Võrgupildid edastatakse veebi kaudu. Need võivad sisaldada HTTP/HTTPS-i URL-e või base64-kodeeringuga andme-URI-sid, mis manustavad andmed otse URL-i, kasutades Base64 kodeerimisskeemi.

Rekvisiidid pildikomponendi kohandamiseks

React Native Image komponendi stiilimiseks ja kohandamiseks saate kasutada mitmeid rekvisiite.

resizeMode

The resizeMode prop määrab, kuidas React peaks oma konteineris pildi suurust muutma ja paigutama. Saadaval on mitu väärtust resizeMode, millest igaüks mõjutab pilti erinevalt.

• kaas: see väärtus skaleerib kujutist ühtlaselt nii, et mõlemad mõõtmed on võrdsed või suuremad kui seda sisaldav element. Seejärel tsentreeritakse pilt konteinerisse. Selle väärtuse kasutamine võib pilti kärpida, et säilitada kuvasuhe.
• sisaldama: Sellega püütakse pilti ideaalselt mahuti mõõtmetesse mahutada ja tsentreerida. Selle tulemuseks võib aga olla tühi ruum pildi servade ümber.
• venitada: venitada väärtus venitab pildi nii, et see täidaks kogu konteineri, olenemata kuvasuhtest. Mõnikord põhjustab pildi moonutamist.
• korda: see väärtus kordab pilti nii horisontaalselt kui ka vertikaalselt, et täita kogu konteiner.
• Keskus: see tsentreerib pildi konteinerielemendi sees ilma seda skaleerimata.

laadimisel

See on tagasihelistamise funktsioon mis käivitatakse pildi laadimise lõppedes. Saate seda kasutada toimingute tegemiseks pärast pildi laadimist, näiteks komponendi oleku värskendamiseks või kasutajale sõnumi kuvamiseks.

onError

The onError prop käivitatakse, kui või kui pildi laadimine ebaõnnestub. See annab võimaluse vajalike toimingute tegemiseks, kui pildi laadimisel ilmneb tõrge. Võite kuvada kasutajale veateate või proovida pilti uuesti laadida.

vaikeallikas

See rekvisiit määrab varupildi, mis kuvatakse juhul, kui põhipildi laadimine ebaõnnestub. Saate seda kasutada põhipildi laadimise ajal vaikekujutise või kohatäite kujutise pakkumiseks.

Kaugpiltide haldamine API-st

Võimalik, et peate hankima oma rakenduse pildi API-st või kaugserverist ja kuvama selle rakenduses. Saate kasutada sisseehitatud Reacti tooma funktsioon või an API taotluste teek nagu Axios Selle eesmärgi jaoks.

Siin on näide selle kohta, kuidas tuua ja kuvada pilti kaug-API-st, kasutades tooma funktsioon:

konst [imageUri, setImageUri] = useState(null);
useEffect(() => {
 tõmba(' https://example.com/api/images/1')
 .hen(vastuseks => response.json())
 .hen(andmeid => setImageUri (data.url))
 .catch(viga =>konsool.error (viga));
}, []);
tagasi (

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

Selle koodi käitamine rakenduses toob pildi määratud API kauglingilt. Näide loob esmalt olekumuutuja jaoks imageUri. A. piires useEffect konks, tooma funktsioon hangib imageUri ja salvestab selle olekumuutujasse kasutades setImageUri().

Lõpuks muudab see Pilt komponent koos allikas prop seatud pildi URI-le, kui kuvatakse laadimisindikaator, oodates pildi kuvamist.

Vahemälu poliitika propi kasutamine vahemälu käitumise kontrollimiseks

Teie brauser suudab vahemällu salvestada kaug-URL-idelt laaditud pildid, et saaks neid tulevikus kiiresti uuesti laadida. Saate kohandada vahemällu salvestatud pildi käitumist, kasutades vahemälu prop. See rekvisiit võib määrata, kuidas brauser peaks pildi vahemällu salvestama ja kuidas see vahemälu kehtetuks muutma.

Vahemälu rekvisiit võib võtta selliseid väärtusi nagu vaikimisi, uuesti laadimine, sundvahemälu, ja ainult-kui-vahemällu salvestatud.

Siin on näide selle kohta, kuidas kasutada vahemälu rekvisiit pildi vahemälu käitumise juhtimiseks:

 allikas={{
 uri: ' https://example.com/images/my-image.png',
 vahemälu: 'force-cache',
 cacheKey: "minu pilt",
 muutumatu: tõsi
 }}
/>

The vahemälu atribuut on seatud 'force-cache', mis näitab, et brauser peaks pildi vahemälust laadima, kui see on saadaval, isegi kui see vahemälu versioon on vana.

Uus rekvisiit cacheKey on ka siin mängus. See on seatud "minu pilt", mis toimib kohandatud vahemälu võtmena, mida saate hiljem kasutada vahemällu salvestatud pildile viitamiseks.

Samuti, muutumatu atribuut on seatud tõsi, mis käsib brauseril käsitleda seda vahemälu kirjet muutumatuna ega tühista seda kunagi.

Kõik on piltide kohta

Komponent React Native Image pakub võimsaid ja paindlikke vahendeid piltide kuvamiseks, sealhulgas stiili kujundamiseks, kaugpiltide haldamiseks ja vahemälu käitumise juhtimiseks.

Kaugpiltide puhul võite alati kasutada kohatäitjat, et kuvada ajutine pilt või tekst kaugpildi laadimise ajal. See loob parema kasutajakogemuse, pakkudes kohest visuaalset tagasisidet ja vältides rakenduse mittereageerimist.