Attēlus ir viegli pievienot savai React Native lietotnei. Iegūstiet visas iebūvētā attēla komponenta priekšrocības.

Attēli sniedz lielu vērtību mobilajām lietojumprogrammām. Tie var palīdzēt ilustrēt jēdzienus, nodot informāciju, radīt vizuālu interesi un nodrošināt kontekstu konkrētam saturam, kuru, iespējams, nevēlaties, lai jūsu lietotnes lietotāji nepalaistu garām.

React Native Image komponents

React Native attēla komponents ir noklusējuma komponents, ko nodrošina React Native bibliotēka, lai atveidotu attēlus jūsu mobilajās lietotnēs. Komponents var ielādēt attēlus gan no vietējiem, gan attāliem avotiem. Tas nodrošina vairākus rekvizītus renderēto attēlu pielāgošanai un stilam.

Lai savā lietojumprogrammā izmantotu attēla komponentu, importējiet Attēls no reaģē-native bibliotēka:

imports Reaģēt no'reaģēt';
imports { Stila lapa, attēls, skats } no'react-native';
konst Lietotne = () => {
atgriezties (

 style={styles.image}
 avots={pieprasīt('./assets/my-image.jpg')}
 />
 </View>
 );
};
konst stili = StyleSheet.create({





instagram viewer



 konteiners: {
 flex: 1,
 alignItems: 'centrs',
 justifyContent: 'centrs',
 },
 attēls: {
 platums: 200,
 augstums: 200,
 apmales rādiuss: 100,
 },
});

Iepriekš ir vienkāršs App komponents ar attēlu. The Attēls komponents aizņem a stils prop, kas nosaka platums, augstums, un apmales rādiuss no attēla. Tas aizņem arī a avots prop, kas ielādē attēlu no lokālā faila, kas atrodas lietotņu direktorija mapē "aktīvi". The avots prop definē iekļaujamā attēla ceļu un var pieņemt gan vietējos, gan tīkla/attālos attēla avotus.

Vietējie attēli ir pieejami lietotāja ierīcē, un tos var saglabāt vai nu īslaicīgi, vai pastāvīgi. Varat saglabāt vietējos attēlus lietotnes projektu direktorijā, piemēram, aktīviem mapi. Varat arī atrast attēlus ārpus lietotnes direktorija, piemēram, ierīces kameras rullī vai fotoattēlu bibliotēkā. Šeit ir piemērs avota ceļam uz vietējo attēlu:

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

Tīkla attēli tiek piegādāti, izmantojot tīmekli. Tie varētu ietvert HTTP/HTTPS vietrāžus URL vai base64 kodētu datu URI, kas iegulst datus tieši vietrādī URL, izmantojot Base64 kodēšanas shēmu.

Rekvizīti attēla komponenta pielāgošanai

Ir vairāki rekvizīti, kurus varat izmantot, lai veidotu un pielāgotu React Native Image komponentu.

ResizeMode

The ResizeMode prop nosaka, kā React ir jāmaina attēla izmērs un jānovieto tā konteinerā. Ir pieejamas vairākas vērtības ResizeMode, no kuriem katrs atšķirīgi ietekmēs attēlu.

  • piesegt: šī vērtība vienmērīgi mērogos attēlu, lai abi izmēri būtu vienādi vai lielāki par to saturošo elementu. Pēc tam attēls tiek centrēts konteinerā. Izmantojot šo vērtību, attēls var tikt apgriezts, lai saglabātu proporciju.
  • satur: tas mēģinās ideāli pielāgot un centrēt attēlu konteinera izmēros. Tomēr tas var radīt tukšu vietu ap attēla malām.
  • stiept: stiept vērtība izstiepj attēlu, lai tas aizpildītu visu konteineru neatkarīgi no malu attiecības. Dažkārt rada attēla izkropļojumus.
  • atkārtojiet: šī vērtība atkārto attēlu gan horizontāli, gan vertikāli, lai aizpildītu visu konteineru.
  • centrs: attēls tiks centrēts konteinera elementā, to nemargojot.

onLoad

Tas ir atzvanīšanas funkcija kas darbojas, kad beidzas attēla ielāde. Varat to izmantot, lai veiktu darbības pēc attēla ielādes, piemēram, komponenta stāvokļa atjaunināšanai vai ziņojuma parādīšanai lietotājam.

onError

The onError prop darbosies, ja vai kad neizdosies ielādēt attēlu. Tas nodrošina veidu, kā veikt nepieciešamās darbības, ja, mēģinot ielādēt attēlu, rodas kļūda. Varat parādīt lietotājam kļūdas ziņojumu vai mēģināt vēlreiz ielādēt attēlu.

noklusējuma avots

Šis rekvizīts norāda rezerves attēlu, kas jāparāda, ja neizdodas ielādēt galveno attēlu. Varat to izmantot, lai nodrošinātu noklusējuma attēlu vai viettura attēlu, kamēr tiek ielādēts galvenais attēls.

Attālo attēlu apstrāde no API

Iespējams, jums vajadzēs iegūt lietojumprogrammas attēlu no API vai attālā servera un parādīt to savā lietotnē. Varat izmantot iebūvēto React atnest funkcija vai an API pieprasījumu bibliotēka, piemēram, Axios šim nolūkam.

Šeit ir piemērs, kā iegūt un parādīt attēlu no attālās API, izmantojot atnest funkcija:

konst [imageUri, setImageUri] = useState(null);
useEffect(() => {
 atnest(' https://example.com/api/images/1')
 .hen(atbildi => response.json())
 .hen(datus => setImageUri (data.url))
 .catch(kļūda =>konsole.error (kļūda));
}, []);
atgriezties (

 {imageUri? (
uri: imageUri }} />
 ): (
Notiek ielāde...</Text>
 )}
 </View>
);

Palaižot šo kodu savā lietotnē, tiks iegūts attēls no iestatītās attālās API saites. Piemērā vispirms tiek izveidots stāvokļa mainīgais imageUri. Ietvaros a useEffect āķis, atnest funkcija izgūst imageUri un saglabā to stāvokļa mainīgajā, izmantojot setImageUri().

Visbeidzot, tas padara Attēls komponents ar avots prop iestatīts uz attēla URI, kamēr tiek parādīts ielādes indikators, gaidot attēla parādīšanu.

Kešatmiņas politikas piedāvājuma izmantošana, lai kontrolētu kešatmiņas darbību

Jūsu pārlūkprogramma var saglabāt kešatmiņā attēlus, kas tiek ielādēti no attāliem URL, lai nākotnē varētu tos ātri ielādēt. Varat pielāgot kešatmiņā saglabātā attēla darbību, izmantojot kešatmiņa prop. Šis rekvizīts var norādīt, kā pārlūkprogrammai vajadzētu saglabāt attēla kešatmiņu un kā tai vajadzētu padarīt šo kešatmiņu nederīgu.

Kešatmiņas balstam var būt tādas vērtības kā noklusējuma, atkārtota ielāde, piespiedu kešatmiņa, un tikai-ja kešatmiņā.

Šeit ir piemērs, kā izmantot kešatmiņa rekvizīts, lai kontrolētu attēla kešatmiņas darbību:

 avots={{
 uri: ' https://example.com/images/my-image.png',
 kešatmiņa: 'force-cache',
 cacheKey: "mans attēls",
 nemainīgs: taisnība
 }}
/>

The kešatmiņa rekvizīts ir iestatīts uz 'force-cache', kas norāda, ka pārlūkprogrammai ir jāielādē attēls no kešatmiņas, ja tas ir pieejams, pat ja šī kešatmiņas versija ir veca.

Jauns rekvizīts cacheKey arī šeit spēlē. Tas ir iestatīts uz "mans attēls", kas kalpos kā pielāgota kešatmiņas atslēga, ko varēsit izmantot, lai vēlāk atsauktos uz kešatmiņā saglabāto attēlu.

Tāpat, nemainīgs rekvizīts ir iestatīts uz taisnība, kas liek pārlūkprogrammai uzskatīt šo kešatmiņas ierakstu par nemainīgu un nekad to neatzīt.

Viss ir par attēliem

Komponents React Native Image nodrošina jaudīgu un elastīgu līdzekli attēlu parādīšanai, tostarp stila veidošanai, attālo attēlu apstrādei un kešatmiņas darbības kontrolei.

Attālinātiem attēliem vienmēr varat izmantot vietturi, lai parādītu pagaidu attēlu vai tekstu, kamēr tiek ielādēts attālais attēls. Tas radīs labāku lietotāja pieredzi, nodrošinot tūlītēju vizuālu atgriezenisko saiti un novēršot, ka lietotne nereaģē.