Flex Box (RN) Vs изглед на стека (iOS)

Ако сте запознати с Flex Box или Stack View, тази статия ще бъде добре да се потопите в компонента на iOS / RN на друга технология. Не се притеснявайте! Дори и да не сте запознати, ще се разбирате удобно. И да, ако знаете андроид, можете да го свържете с Linear Layout

Накратко, ако кажа какво правят Flex Box и Stack View, и двете се използват за определяне на изгледите.

Нека започнем с момчетата за сравнение :) ..

  • В Stack View имаме нещо, наречено ос. Оста може да бъде хоризонтална или вертикална. Подобно на Flex Box имаме и flexDirection, който може да бъде ред или колона. Хоризонтални и вертикални са съответствието на StackView на реда и колоната на FlexBox съответно. RN дава по-голяма гъвкавост за подреждане на изгледи с още две опции, тоест обрат и ред на колона.

Какво е ос / flexDirection?

За тези, които са напълно нови в тази концепция, този имот ви помага да подредите изгледите си по посока y или x посока. По-чист начин, ако искате да подредите повече от един изглед отгоре надолу (вертикално), използвайте оста като вертикална / колона, а за ляво на дясно (хоризонтално), използвайте оста като хоризонтална / ред. Да, RN се предлага с още две удобни опции. Ако искате да подредите изгледите си от дясно на ляво (<-), използвайте обратен ред и отдолу нагоре използвайте колона назад. Как бихте направили това в iOS? Това е извън обхвата на тази статия, но да, един начин може да се завърти изгледа на стека на контейнера.

Нека продължим напред ..

  • Stack View има свойство, наречено като разпространение. По същия начин Flex има оправдание на съдържанието. Тези свойства работят успоредно на оста. Какво означава? Придвижването успоредно на оста означава, че съдържанието в изгледа се разпределя по оста.

Объркани не получихте дистрибуция / оправдание на съдържанието?

Искате да подредите 3 изгледа, както е показано на горната снимка.

Така че, първо трябва да настроите оста / flexDirection. Настроили сте вертикална ос / flexDirection. Сега искате да подредите 3 ръце. И искате тези ръце да са в центъра на черен прът, както е на снимката.

Тъжна новина , няма да се случи автоматично. Добра новина , Можем да го направим със свойство justifyContent. Ура !!!

Задайте свойството на център и сте готови .

О, да, прав си. Няма имот като център по разпределение. Така че в iOS трябва да създадете подвидовете си по такъв начин, че да идва в центъра и да настроите разпределението да попълваEqually така, че всеки изглед да идва със същия размер като на снимка. За RN задайте гъвкавостта за всеки имот на 1. Тя автоматично ще го запълва еднакво за вас.

Все пак няма да дойде същото като това, което е на снимката. Трябва също да поставите ръката в центъра на кутията. Това не може да се направи със свойствата, които описахме досега. Така че имаме още една собственост в кофата. да се потопим и в това.

  • В Stack View имате свойство, наречено като подравняване. По подобен начин във Flex имаме и привеждане в съответствие. Това свойство работи перпендикулярно на оста. Отново какво означава? И така, основното придвижване перпендикулярно на оста показва, че елементите в изгледа ще бъдат подравнени обратно на оста.

Тъй като ние искаме да подредим ръката и в средата на кутията, а вие вече сте я подредили в центъра на пръта с помощта на свойството justifyContent. Сега е време да го подравните в центъра на кутията .

И така, тук идва подравняването / подравняванетоИтемите на снимката. Както казах, тя работи перпендикулярно на оста. И можете да гледате, че в този пример - Оста е вертикална и искаме ръката ни в средата (също хоризонтално). Затова поставете свойството за подравняване / подравняванеItems на център и сте добри.

Това е всичко.

За да обобщим, ако оста / flexDirection е вертикална / колона, така че елементите ще бъдат разпределени вертикално (успоредно на оста) и подравнени хоризонтално (перпендикулярно на оста).

Дано ви е харесало. Скоро ще изляза с още една статия с практически пример с повече прилики и разлики. Моля, коментирайте вашите мнения и подобрения за статията.

Послепис Изгледът на стека и Flex не са абсолютно еднакви. Но те съществуват, за да постигнат същото нещо, което е подреждането на гледните точки.

Благодаря за прочетеното :)