Слике се лако додају у вашу апликацију Реацт Нативе. Добијте све предности и предности уграђене компоненте слике.

Слике пружају обиље вредности мобилним апликацијама. Они могу помоћи у илустровању концепата, преношењу информација, стварању визуелног интересовања и пружању контекста за одређени садржај који можда не желите да корисници ваше апликације пропусте.

Реацт Нативе Имаге компонента

Компонента Реацт Нативе слике је подразумевана компонента коју обезбеђује Реацт Нативе библиотека за приказивање слика у вашим мобилним апликацијама. Компонента може да учитава слике и са локалних и са удаљених извора. Пружа неколико реквизита за прилагођавање и стилизовање приказаних слика.

Да бисте користили компоненту слике у својој апликацији, увезите Слика од реаговати-нативе библиотека:

увоз Реаговати из'реаговати';
увоз { СтилеСхеет, Имаге, Виев } из'реацт-нативе';
конст Апп = () => {
повратак (

 стиле={стилес.имаге}
 извор={захтевају('./ассетс/ми-имаге.јпг')}
 />
 </View>
 );
};
конст стилес = СтилеСхеет.цреате({





instagram viewer



 контејнер: {
 флек: 1,
 алигнИтемс: 'центар',
 јустифиЦонтент: 'центар',
 },
 слика: {
 ширина: 200,
 висина: 200,
 бордерРадиус: 100,
 },
});

Горе је једноставно Апликација компонента са сликом. Тхе Слика компонента узима а стил реквизит који поставља ширина, висина, и бордерРадиус слике. Такође је потребно а извор проп који учитава слику из локалне датотеке која се налази у фасцикли "ассетс" унутар директоријума апликације. Тхе извор проп дефинише путању слике коју треба укључити и може прихватити и локалне и мрежне/удаљене изворе слике.

Локалне слике су доступне на уређају корисника и можете их чувати привремено или трајно. Можете да складиштите локалне слике у директоријуму пројекта апликације, као што је средства фолдер. Такође можете да лоцирате слике изван директоријума апликације, као што је у снимку фотоапарата или фототеци уређаја. Ево примера изворне путање до локалне слике:

ури: 'филе:///патх/то/ми-имаге.јпг' }} />

Мрежне слике се испоручују путем веба. Они могу укључивати ХТТП/ХТТПС УРЛ-ове или УРИ-је података кодиране басе64, који уграђују податке директно у УРЛ користећи Басе64 шему кодирања.

Реквизити за прилагођавање компоненте слике

Постоји неколико реквизита које можете користити за стилизовање и прилагођавање компоненте Реацт Нативе Имаге.

ресизеМоде

Тхе ресизеМоде проп одређује како Реацт треба да промени величину и позиционира слику унутар свог контејнера. Постоји неколико доступних вредности за ресизеМоде, од којих ће сваки другачије утицати на слику.

  • поклопац: Ова вредност ће равномерно скалирати слику тако да обе димензије буду једнаке или веће од елемента који садржи. Слика се затим центрира унутар контејнера. Коришћење ове вредности може довести до тога да се слика исече како би се задржао однос ширине и висине.
  • садржати: Ово ће покушати да савршено уклопи и центрира слику унутар димензија контејнера. Међутим, ово може довести до празног простора око ивица слике.
  • истегнути: Тхе истегнути валуе протеже слику да попуни цео контејнер, без обзира на однос ширине и висине. Понекад узрокује изобличење слике.
  • понављање: Ова вредност понавља слику и хоризонтално и вертикално да попуни цео контејнер.
  • центар: Ово ће центрирати слику унутар елемента контејнера без њеног скалирања.

на оптерећење

Ово је функција повратног позива који се покреће када се слика заврши са учитавањем. Можете га користити за обављање радњи након што се слика учита, као што је ажурирање стања компоненте или приказивање поруке кориснику.

онЕррор

Тхе онЕррор проп ће се покренути ако или када слика не успе да се учита. Пружа начин да извршите неопходне радње ако дође до грешке при покушају учитавања слике. Можете приказати поруку о грешци кориснику или покушати поново да учитате слику.

дефаултСоурце

Овај пропс наводи резервну слику за приказ ако се главна слика не учита. Можете га користити да обезбедите подразумевану слику или слику чувара места док се главна слика учитава.

Руковање удаљеним сликама из АПИ-ја

Можда ћете морати да преузмете слику за своју апликацију са АПИ-ја или удаљеног сервера и прикажете је у оквиру апликације. Можете користити уграђени Реацт донети функцију или ан АПИ захтева библиотеку као што је Акиос за ову сврху.

Ево примера како да преузмете и прикажете слику са удаљеног АПИ-ја користећи донети функција:

конст [имагеУри, сетИмагеУри] = усеСтате(нула);
усеЕффецт(() => {
 донеси (' https://example.com/api/images/1')
 .онда(одговор => респонсе.јсон())
 .онда(података => сетИмагеУри (дата.урл))
 .улов(грешка =>конзола.еррор (грешка));
}, []);
повратак (

 {имагеУри? (
ури: имагеУри }} />
 ): (
Учитавање...</Text>
 )}
 </View>
);

Покретање овог кода у вашој апликацији ће преузети слику са постављене удаљене АПИ везе. Пример прво креира променљиву стања за имагеУри. У оквиру а усеЕффецт кука, тхе донети функција преузима имагеУри и чува га у променљивој стања користећи сетИмагеУри().

Коначно, он представља Слика компонента са извор проп постављен на УРИ слике док се приказује индикатор учитавања, чекајући да се слика прикаже.

Коришћење пропа политике кеша за контролу понашања кеша

Ваш претраживач може да кешира слике које учитава са удаљених УРЛ адреса, тако да их може брзо поново учитати у будућности. Можете да прилагодите понашање кеширане слике користећи цацхе проп. Овај проп може да одреди како претраживач треба да кешира слику и како да поништи тај кеш.

Кеш проп може имати вредности као што су подразумевано, поново учитавање, принудно кеширање, и само-ако-кеширано.

Ево примера како да користите цацхе проп за контролу понашања кеша слике:

 извор={{
 ури: ' https://example.com/images/my-image.png',
 кеш: 'форце-цацхе',
 цацхеКеи: 'моја слика',
 непроменљиво: истина
 }}
/>

Тхе цацхе својство је подешено на 'форце-цацхе', што указује на то да претраживач треба да учита слику из кеша ако је доступна, чак и ако је та верзија кеша стара.

Нови реквизит цацхеКеи је такође у игри овде. Постављено је на 'моја слика', који ће служити као прилагођени кључ за кеширање који можете користити за касније референцирање кеширане слике.

Такође, тхе непроменљиво својство је подешено на истина, који говори претраживачу да третира овај унос у кеш као непроменљив и да га никада не поништи.

Све што постоји о сликама

Компонента Реацт Нативе Имаге пружа моћно и флексибилно средство за приказивање слика, укључујући стилизовање, руковање удаљеним сликама и контролу понашања кеша.

За удаљене слике, увек можете да користите чувар места за приказ привремене слике или текста док се удаљена слика учитава. Ово ће створити боље корисничко искуство пружањем тренутних визуелних повратних информација и спречавањем да апликација не реагује.