Библиотеке компоненти су колекција прилагодљивог кода за вишекратну употребу који се може направити тако да одговара обрасцу дизајна одређене апликације. Они помажу у одржавању доследног дизајна на свим платформама и убрзавају процес развоја.
Овде ћете научити како да користите библиотеку компоненти Реацт Нативе Елементс када правите своју следећу Реацт Нативе апликацију.
Шта су Реацт Нативе Елементс?
Реацт Нативе Елементс (РНЕ) је покушај отвореног кода Реацт Нативе програмера да створе библиотеку компоненти која може бити корисна при изградњи Андроид, иОС и веб апликација. За разлику од многих друге библиотеке компоненти Реацт Нативе, РНЕ подржава ТипеСцрипт синтаксу.
Библиотека се састоји од преко 30 компоненти које се фокусирају на структуру компоненти.
Инсталирање реактивних изворних елемената са Реацт Нативе ЦЛИ
Следећа упутства су да инсталирате Реацт Нативе Елементс у пројекат креиран помоћу Реацт Нативе клија.
Инсталирајте Реацт Нативе Елементс у своју голу Реацт Нативе апликацију тако што ћете покренути:
нпм инсталл @рнеуи/themed @рнеуи/base
Такође би требало да инсталирате реацт-нативе-вецтор-ицонс и сафе-ареа-цонтект:
нпм инсталирај реаговати-домородац-векторске иконе реагују-домородац-безбедно-област-контекст
Како инсталирати Реацт изворне елементе у Екпо пројекат
Да бисте инсталирали Реацт Нативе Елементс у постојећи Екпо пројекат, инсталирајте пакет и реагујте-нативе-сафе-ареа-цонтект:
предиво додати @рнеуи/themed @рнеуи/основна реакција-домородац-сафе-ареа-цонтект
Одржавајте један менаџер пакета као што је нпм или иарн док инсталирате пакете да бисте избегли ризик од сукоба зависности.
Пројекти направљени помоћу екпо цли-а имају подразумевано инсталиране реацт-нативе-вецтор-ицонс, тако да не морате да их инсталирате.
Стилинг Сингле Реацт Нативе Елементс Цомпонентс
Све компоненте доступне преко РНЕ-а користе различите реквизите за стилизовање компоненте и контејнера компоненте.
Контејнер компоненте је основни таг који се омота око ознаке компоненте, као што је. Тхе таг је непобедив око компоненте и узима а цонтаинерСтиле проп за примену стилова приказа.
Компонента може да прими подразумеване стилске реквизите као што су боја, тип, и величина. Компонента такође може да добије јединствени прилагођени стилски реквизит за руковање стиловима компоненте.
Ово су све спољашњи стилови за компоненту.
На пример, стилизовање Дугме саставни део:
увоз { Поглед } из "реаговати-нативе";
увоз { Дугме } из "@рнеуи/тхемед";
конст МиЦомпонент = () => {
повратак (
<Поглед>
<Дугме
буттонСтиле={{ бацкгроундЦолор: "сива" }}
цонтаинерСтиле={{ ширина: 150 }}
>
Солид Буттон
</Button>
<Дугме
типе="нацрт"
цонтаинерСтиле={{ ширина: 150, маргина: 10 }}
титле="Дугме Оутлине"
/>
</View>
);
}
Код изнад показује како можете применити стилове на компоненту дугмета. Једно дугме користи подразумевано тип проп, а други користи обичај буттонСтиле проп. Оба дугмета такође користе цонтаинерСтиле проп за додавање стилова приказа.
Креирање тема за компоненте Реацт Нативе Елементс
Креирање тема за РНЕ компоненте је корисно када желите да примените стил на сваку инстанцу тих компоненти. Са темама, прилагођавање компоненти тако да одговарају жељеном шаблону дизајна постаје лак задатак.
РНЕ пружа а цреатеТхеме() функција за стилизовање компоненти. Ова функција ће задржати стилове теме који замењују унутрашње или подразумеване стилове сваке компоненте.
Да бисте креирали тему, позовите цреатеТхеме() и проследите жељене стилове теме као аргумент функције:
увоз { ТхемеПровидер, цреатеТхеме } из '@рнеуи/тхемед';
конст тхеме = цреатеТхеме({
компоненте: {
Дугме: {
контејнерСтиле: {
маргина: 10,
},
титлеСтиле: {
боја: "црн",
},
},
},
});
Тхе ТхемеПровидер примениће стилове на било коју компоненту умотану у њу.
Провајдер прихвата а тема проп који је подешен на тему креирану изнад:
<ТхемеПровидер тхеме={тхеме}>
<Дугме титле="Тематско дугме" />
</ThemeProvider>
<Дугме титле="Нормално дугме" />
Стилови теме замењују унутрашње или подразумеване стилове компоненти, али неће заменити стил спољне компоненте.
РНЕ-ов ред првенства поставља спољашње стилове на врх хијерархије.
Пример:
// Тхеме
конст тхеме = цреатеТхеме({
компоненте: {
Дугме: {
контејнерСтиле: {
маргина: 10,
боја позадине: "црвена",
},
},
},
});
//Component
<ТхемеПровидер тхеме={тхеме}>
<Дугме титле="Тематско дугме" боја={"секундарни"}/>
</ThemeProvider>
У горњем коду, боја позадине Дугме компонента ће бити секундарна, што је зелена боја за разлику од стила теме црвене.
А тема објекат се испоручује са РНЕ, обезбеђујући бројне подразумеване вредности боја из кутије. РНЕ нуди различите опције као што су ТхемеЦонсумер саставни део, усеТхеме() кука, и макеСтилес() кука генератор за приступ тема објекат.
Тхе ТхемеЦонсумер компонента ће омотати ваше компоненте приказане анонимном функцијом. Ова анонимна функција заузима тема као реквизит.
Можете приступити вредностима теме помоћу а стил реквизит:
увоз Реаговати из 'реаговати';
увоз { Дугме } из 'реацт-нативе';
увоз { ТхемеЦонсумер } из '@рнеуи/тхемед';
конст МиЦомпонент = () => (
<ТхемеЦонсумер>
{({ тема }) => (
<Дугме титле="ТхемеЦонсумер" стиле={{ боја: тхеме.цолорс.примари }} />
)}
</ThemeConsumer>
)
Алтернативно, можете користити усеТхеме() кука за приступ теми унутар компоненте.
На пример:
увоз Реаговати из 'реаговати';
увоз { Дугме } из 'реацт-нативе';
увоз { усеТхеме } из '@рнеуи/тхемед';конст МиЦомпонент = () => {
конст { тхеме } = усеТхеме();
повратак (
<Прикажи стил={стилес.цонтаинер}>
<Дугме титле="усеТхеме" стиле={{ боја: тхеме.цолорс.примари }}/>
</View>
);
};
Тхе макеСтилес() Хоок генератор је сличан коришћењу стилског листа за дефинисање стилова. Као и листа стилова, он одваја сваки стил изван ваше рендероване компоненте. Позивајући се на тема објекат унутар компоненте стилског пропа.
Проширивање тема помоћу ТипеСцрипт-а
РНЕ подржава ТипеСцрипт декларације у вашој апликацији, омогућавајући програмерима да искористе предности предности коришћења ТипеСцрипт језика.
Са ТипеСцриптс спајање декларација, можете проширити дефиниције тема да бисте додали прилагођене боје и реквизите за РНЕ-ове подразумеване и прилагођене компоненте.
Да бисте проширили боје унутар објекта теме, креираћете посебан ТипеСцрипт.тс датотеку и прогласити модул @рнеуи/тхемед унутар датотеке.
Затим можете наставити да додате своје прилагођене боје и одредите њихов очекивани тип:
// **ТипеСцрипт.тс**увоз '@рнеуи/themed';
прогласити модул '@рнеуи/тхемед' {
извоз интерфејсБоје{
примарноЛигхт: стринг;
сецондариЛигхт: стринг;
}
}
Помоћу овог модула можете проследити своје прилагођене боје као вредности приликом креирања теме:
конст тхеме = цреатеТхеме({
боје: {
примарно светло: "",
секундарно светло: ""
},
})
Сада су прилагођене боје део вашег објекта теме и може им се приступити помоћу ТхемеПровидер, ТхемеЦонсумер, или усеТхеме() кука.
РНЕ Цомпонентс вс. Реацт Нативе Цомпонентс
Библиотеке компоненти као што је Реацт Нативе Елементс су одличан начин да брзо покренете апликацију. Они задржавају ваш фокус на структури апликације, а не на детаљима дизајна. Коришћење РНЕ компоненти преко Реацт Нативе компоненти треба да буде вођено првенствено фокусом ваше апликације и колико времена за развој имате.
