Како користити Флекбок у Реацт Нативе-у

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

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

Поређење понашања Флекбок-а у Реацт Нативе-у и Веб Девелопмент-у

Ако желите да организујете садржај елемента контејнера користећи флекбок у обичном ЦСС-у, морате да користите дисплеј: флекс имовина.

контејнер { приказ: флек; }

Али са Реацт Нативе, не морате да постављате дисплеј: флекс имовина. То је зато што Реацт Нативе подразумевано користи флекбок за прављење распореда.

Ево неких разлика које треба имати на уму како се флекбок понаша када се користи за поравнавање ХТМЛ елемената у веб апликацијама у односу на то како се понаша у Реацт Нативе-у:

• флекДирецтион подразумевано на ред у веб апликацијама, али подразумевано је колона у Реацт Нативе.
• алигнЦонтент подразумевано на истегнути у веб апликацијама и флек-старт у Реацт Нативе.
• флекСхринк подразумевано је 1 у вебу и 0 у Реацт Нативе-у.

Коришћење Флекбок својстава у Реацт Нативе-у

Флекбок својства вам омогућавају да опишете како да поравнате подређене елементе елемента контејнера. Морате да разумете ова својства да бисте креирали сложене распореде који одговарају потребама ваше апликације.

1. Коришћење својства флек у Реацт Нативе-у

Тхе флек својство одређује како се Поглед компонента испуњава екран. Ово својство прихвата целобројну вредност већу или једнаку 0. Вредност одређује део екрана Поглед компонента треба да преузме.

У овом примеру, правите екран са једним погледом из Реацт Нативе библиотека компоненти:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
извозУобичајенофункцијаАпликација() {
повратак (
 <>
бацкроундЦолор: "#А020Ф0", флек: 1}} /> 
 </>
 )
}

Ево излаза:

Овде сте доделили 1 као флексибилну вредност Поглед саставни део. Тхе Поглед компонента заузима цео екран (100%) јер сте поделили простор у једну групу.

Хајде да погледамо још један пример:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
извозУобичајенофункцијаАпликација() {
повратак (

бацкроундЦолор: "#А020Ф0", флек: 1}} />
боја позадине: "#7цб48ф", флек: 3 }} /> 
 </View>
 )
}

Ево исхода:

Ево ти два Поглед елемената унутар другог Поглед елемент. Прво дете је постављено на флекс: 1, а други је подешен на флекс: 3. Те вредности деле простор између двоје деце. Први заузима 1/4 екрана, док други заузима 3/4 екрана (Екран је подељен на 4 блока јер је 1+3 = 4).

2. Коришћење својства флекДирецтион у Реацт Нативе-у

Ако погледате горњи снимак екрана, видећете да су подређени елементи један на другом. Ово је подразумевано понашање флекбок-а у Реацт Нативе (флекДирецтион подразумевано је на колона вредност).

Такође можете подесити флекДирецтион власништво до ред, колона-реверс, и ред-обрнути. У следећем примеру, флекДирецтион је подешен на ред, стога су подређени елементи постављени један поред другог:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 боја позадине: "#00ФФ00",
 флек: 1,
 алигнИтемс: "центар",
 флекДирецтион: "ред",
 },
 квадрат: {
 боја позадине: "#ФФ0000",
 ширина: 98,
 висина: 98,
 маргина: 4,
 },
});
извозУобичајенофункцијаАпликација() {
повратак (




 </View>
 )
}

Ево исхода:

Подешавање флекДирецтион до ред-обрнути поставља децу једно поред другог, али мења редослед. Слично томе, тхе колона-реверс поставља децу једно на друго, али у супротном редоследу од оног дефинисаног колона.

3. Коришћење јустифиЦонтент у Реацт Нативе-у

Тхе јустифиЦонтент својство поравна подређене елементе флекбок контејнера дуж примарне осе. Ако је флекДирецтион је подешен на колона, онда је примарна оса вертикална оса. Ако је подешено на ред, онда је хоризонтално.

Могуће вредности од јустифиЦонтентсу флек-старт, флек-енд, центар, простор-између, простор-около, и просторно равномерно.

У следећем примеру, флекДирецтион постављено је да весла и јустифиЦонтентје подешен на флек-старт:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 боја позадине: "#00ФФ00",
 флек: 1,
 јустифиЦонтент: "флек-старт",
 флекДирецтион: "ред",
 },
 квадрат: {
 боја позадине: "#ФФ0000",
 ширина: 98,
 висина: 98,
 маргина: 6,
 },
});
извозУобичајенофункцијаАпликација() {
повратак (




 </View>
 )
}

Ево излаза:

Ако промените флекДирецтион до колона, флек-старт примениће се на вертикалну осу. Тако ће кутије бити наслагане једна на другу.

Подешавање јустифиЦонтент до центра (док је примарна оса а колона) центрира три кутије за децу.

4. Коришћење алигнИтемс у Реацт Нативе-у

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

У следећем примеру, флекДирецтион је подешен на ред и алигнИтемсје подешен на флек-старт:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 боја позадине: "#00ФФ00",
 флек: 1,
 алигнИтемс: "флек-старт",
 флекДирецтион: "ред",
 },
 квадрат: {
 боја позадине: "#ФФ0000",
 ширина: 98,
 висина: 98,
 маргина: 6,
 },
});
извозУобичајенофункцијаАпликација() {
повратак (





 </View>
 )
}

Ево излаза:

Ако поставите флекДирецтион власништво до колона и алигнИтемс до центар, кутије ће бити постављене једна на другу, а подређени елементи ће бити центрирани.

5. Коришћење алигнСелф у Реацт Нативе-у

Тхе алигнСелф својство одређује како се појединачно дете треба поравнати у контејнеру. То превазилази алигнИтемс, а могуће вредности су флек-старт, флек-енд, центар, и основна линија.

У следећем примеру, поставили смо подразумевано алигнИтемс својство и заменити га користећи алигнСелф:

увоз Реаговати из"реаговати"
увоз { СтилеСхеет, Виев } из"реаговати-нативе"
конст стилес = СтилеСхеет.цреате({
 контејнер: {
 боја позадине: "#00ФФ00",
 флек: 1,
 алигнИтемс: "центар", 
 јустифиЦонтент: "центар", 
 флекДирецтион: "ред",
 },
 квадрат: {
 боја позадине: "#ФФ0000",
 ширина: 98,
 висина: 98,
 маргина: 6,
 },
});
извозУобичајенофункцијаАпликација() {
повратак (


алигнСелф: "флек-енд" }]} />
алигнСелф: "флек-старт" }]} /> 
 )
}

Ево исхода:

Остала својства Флекбок-а

Постоје још два својства која можете да користите када креирате флексбок распоред у Реацт Нативе:

• флекВрап: У случају да деца контејнера преливају из њега. Користите флекВрап да одредите да ли треба да се скупе на једну линију или умотају у више редова. Могуће вредности за флекВрап су новрап и замотати.
• јаз: Користиш јаз својство за додавање празнина између ставки мреже у контејнеру. Његова вредност треба да буде величина размака који желите између ставки. Можете одредити јаз имовина користећи ЦСС јединице као што су пк, ем или рем.

Сазнајте више о Реацт Нативе-у

Сада када разумете флекбок и знате како да га користите у својој Реацт Нативе апликацији за креирање флексибилних и прилагодљивих распореда, време је да уђете у детаље Реацт Нативе-а.