Vaizdus lengva pridėti prie „React Native“ programos. Gaukite visas integruotojo vaizdo komponento privalumus ir trūkumus.

Vaizdai suteikia daug naudos mobiliosioms programoms. Jie gali padėti iliustruoti sąvokas, perteikti informaciją, sukurti vaizdinį susidomėjimą ir suteikti konteksto konkrečiam turiniui, kurio galbūt nenorėtumėte, kad programos naudotojai praleistų.

„React Native Image“ komponentas

„React Native“ vaizdo komponentas yra numatytasis komponentas, kurį teikia „React Native“ biblioteka, kad būtų galima pateikti vaizdus jūsų programose mobiliesiems. Komponentas gali įkelti vaizdus tiek iš vietinių, tiek iš nuotolinių šaltinių. Jame yra keletas rekvizitų, skirtų vaizdams pritaikyti ir formuoti.

Norėdami naudoti vaizdo komponentą programoje, importuokite Vaizdas nuo reaguoja-gimtoji biblioteka:

importuoti Reaguoti iš'reaguoti';
importuoti { Style Sheet, Image, View } iš'react-native';
konst Programa = () => {
grąžinti (

 style={styles.image}
 šaltinis={reikalauti(„./assets/my-image.jpg“)}
 />
 </View>
 );
};





instagram viewer

konst styles = StyleSheet.create({
 konteineris: {
 lankstus: 1,
 lygiuoti elementus: 'centras',
 JustifyContent: 'centras',
 },
 vaizdas: {
 plotis: 200,
 aukštis: 200,
 kraštinės spindulys: 100,
 },
});

Aukščiau yra paprastas Programėlė komponentas su vaizdu. The Vaizdas komponentas užima a stilius rekvizitas, kuris nustato plotis, aukščio, ir ribinis spindulys vaizdo. Taip pat reikia a šaltinis rekvizitas, kuris įkelia vaizdą iš vietinio failo, esančio programos katalogo aplanke „ištekliai“. The šaltinis prop apibrėžia vaizdo kelią, kurį reikia įtraukti, ir gali priimti tiek vietinius, tiek tinklo / nuotolinio vaizdo šaltinius.

Vietiniai vaizdai yra prieinami vartotojo įrenginyje ir galite juos saugoti laikinai arba visam laikui. Programos projektų kataloge galite saugoti vietinius vaizdus, ​​pvz., turto aplanką. Taip pat galite rasti vaizdus už programos katalogo ribų, pvz., įrenginio fotoaparato juostoje arba nuotraukų bibliotekoje. Štai šaltinio kelio į vietinį vaizdą pavyzdys:

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

Tinklo vaizdai pristatomi per žiniatinklį. Jie gali apimti HTTP/HTTPS URL arba base64 koduotus duomenų URI, kurie įterpia duomenis tiesiai į URL naudojant Base64 kodavimo schemą.

Reklamos, kaip tinkinti vaizdo komponentą

Yra keletas rekvizitų, kuriuos galite naudoti norėdami sukurti ir tinkinti komponentą „React Native Image“.

ResizeMode

The ResizeMode prop nustato, kaip React turėtų pakeisti vaizdo dydį ir padėti jį talpykloje. Yra kelios galimos vertės ResizeMode, kurių kiekvienas skirtingai paveiks vaizdą.

  • viršelis: ši vertė tolygiai padidins vaizdo mastelį, kad abu matmenys būtų lygūs arba didesni už jį turintį elementą. Tada vaizdas centruojamas konteineryje. Naudojant šią reikšmę, vaizdas gali būti apkarpytas, kad būtų išlaikytas kraštinių santykis.
  • turėti: taip bus bandoma idealiai pritaikyti ir centruoti vaizdą pagal konteinerio matmenis. Tačiau dėl to vaizdo kraštuose gali atsirasti tuščios vietos.
  • ištempti: ištempti vertė ištempia vaizdą, kad užpildytų visą talpyklą, neatsižvelgiant į formato santykį. Kartais vaizdas iškraipomas.
  • kartoti: ši reikšmė pakartoja vaizdą tiek horizontaliai, tiek vertikaliai, kad būtų užpildytas visas konteineris.
  • centras: vaizdas bus centruotas konteinerio elemente jo mastelio nekeičiant.

įkelti

Tai yra atgalinio skambinimo funkcija kuris paleidžiamas baigus įkelti vaizdą. Jį galite naudoti norėdami atlikti veiksmus po vaizdo įkėlimo, pvz., atnaujinti komponento būseną arba rodyti pranešimą vartotojui.

onError

The onError prop bus paleistas, jei nepavyks įkelti vaizdo. Tai suteikia galimybę atlikti būtinus veiksmus, jei bandant įkelti vaizdą įvyksta klaida. Galite parodyti klaidos pranešimą vartotojui arba bandyti iš naujo įkelti vaizdą.

numatytasisŠaltinis

Šis pasiūlymas nurodo atsarginį vaizdą, kuris bus rodomas, jei nepavyksta įkelti pagrindinio vaizdo. Galite naudoti jį norėdami pateikti numatytąjį vaizdą arba rezervuotos vietos vaizdą, kai įkeliamas pagrindinis vaizdas.

Nuotolinių vaizdų tvarkymas iš API

Gali reikėti gauti programos vaizdą iš API arba nuotolinio serverio ir parodyti jį programoje. Galite naudoti įmontuotą React atnešti funkcija arba an API užklausų biblioteka, pvz., „Axios“. šiam tikslui.

Štai pavyzdys, kaip gauti ir rodyti vaizdą iš nuotolinės API naudojant atnešti funkcija:

konst [imageUri, setImageUri] = useState(nulinis);
useEffect (() => {
 atnešti (' https://example.com/api/images/1')
 .thena(atsakymą => response.json())
 .thena(duomenis => setImageUri (data.url))
 .catch(klaida =>konsolė.error (klaida));
}, []);
grąžinti (

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

Vykdydami šį kodą programoje, vaizdas bus gautas iš nustatytos nuotolinės API nuorodos. Pavyzdyje pirmiausia sukuriamas būsenos kintamasis imageUri. Per a naudojimoEfektas kabliukas, atnešti funkcija nuskaito imageUri ir išsaugo jį būsenos kintamajame naudojant setImageUri().

Galiausiai, tai suteikia Vaizdas komponentas su šaltinis prop nustatytas į vaizdo URI, kol rodomas įkėlimo indikatorius ir laukiama, kol vaizdas bus parodytas.

Talpyklos strategijos pasiūlymo naudojimas talpyklos veikimui valdyti

Jūsų naršyklė gali talpykloje išsaugoti vaizdus, ​​​​kuriuos įkelia iš nuotolinių URL, kad ateityje galėtų juos vėl greitai įkelti. Galite tinkinti talpykloje esančio vaizdo veikimą naudodami talpykla prop. Šis rekvizitas gali nurodyti, kaip naršyklė turėtų išsaugoti vaizdą talpykloje ir kaip ji turėtų panaikinti šią talpyklą.

Talpyklos rekvizitas gali užimti tokias reikšmes kaip numatytasis, įkelti iš naujo, priverstinė talpykla, ir tik-jei-talpinta.

Štai pavyzdys, kaip naudoti talpykla rekvizitas, skirtas valdyti vaizdo talpyklos veikimą:

 šaltinis={{
 uri: ' https://example.com/images/my-image.png',
 talpykla: „force-cache“,
 cacheKey: "mano vaizdas",
 nekintamas: tiesa
 }}
/>

The talpykla nuosavybė nustatyta „force-cache“, kuris rodo, kad naršyklė turėtų įkelti vaizdą iš talpyklos, jei jis yra, net jei ta talpyklos versija yra sena.

Nauja butaforija cacheKey čia taip pat žaidžia. Jis nustatytas į "mano vaizdas", kuris bus naudojamas kaip priskirtas talpyklos raktas, kurį vėliau galėsite naudoti talpyklos atvaizdui nurodyti.

Taip pat, nekintamas nuosavybė nustatyta tiesa, kuri nurodo naršyklei laikyti šį talpyklos įrašą nekintamu ir niekada jo nepanaikinti.

Viskas apie vaizdus

„React Native Image“ komponentas yra galinga ir lanksti priemonė vaizdams rodyti, įskaitant stilių, nuotolinių vaizdų tvarkymą ir talpyklos elgsenos valdymą.

Nuotoliniams vaizdams visada galite naudoti rezervuotąją vietą, kad būtų rodomas laikinas vaizdas arba tekstas, kol įkeliamas nuotolinis vaizdas. Tai sukurs geresnę naudotojo patirtį, nes iškart pateiks vaizdinį grįžtamąjį ryšį ir neleis programai nereaguoti.