Понимание Flexbox в React Native
Создание пользовательского интерфейса (UI) в мобильном приложении сложнее, чем в веб-приложении. Возможные причины этого:
- Мобильные устройства имеют ограниченный размер экрана.
- Каждое мобильное устройство имеет разное разрешение, влияющее на пользовательский интерфейс приложения.
- И Android, и iOS имеют свои платформы для создания общего приложения с одним и тем же пользовательским интерфейсом, что отнимает больше времени.
React Native
Мы используем React Native для создания мобильного приложения, которое работает как на устройствах Android, так и на устройствах Apple. Чтобы приспособиться к разным размерам экрана, React Native предлагает поддержку flexbox.
Как новичок в React Native, я обнаружил, что изо всех сил пытаюсь понять разницу между всеми различными свойствами flexbox, включая justify-content, align-items, flex-direction. .
Как создать пользовательский интерфейс с помощью Flexbox?
Flexbox
Для размещения элементов на экране мы используем Flexbox.
- Включено в CSS3
- Модуль, используемый для создания адаптивных макетов.
- Совместимость с экранами разных размеров и устройствами отображения
Макет разделен на две части: Контейнер и Элементы.
Свойства контейнера включают flex, flex-direction, justify-content и align-items, задают макет и элемент позиционирования в контейнере.
Flex
Это заставляет контейнер заполнять своего родителя, то есть весь экран.
Предметы будут «сражаться» за доступное пространство вдоль вашей основной оси.
viewMain: родительский макет, где flex: 1 покроет все доступное пространство на экране, то есть весь экран.
viewRed, viewBlue, viewGreen будут предоставлять общий доступ к экрану в зависимости от коэффициента гибкости, т. е.
viewRed: 1 / (1 + 2 + 3) // эта часть всего экрана
viewBlue: 2 / (1 + 2 + 3)…
Направление изгиба
определяет направление, в котором элементы помещаются в контейнер.
Если flexDirection - это строка, то элементы располагаются вдоль оси X, т.е. теперь ось X является главной осью.
Если flexDirection - это столбец, то элементы располагаются по оси Y, т.е. теперь ось Y является главной осью.
flexDirection: ‘row’ | «Столбец» (по умолчанию) | «Строка-реверс» | "Обратный столбец"
Обоснование содержания
justifyContent: ‘flex-start’ | ’flex-end’ | ’center’ | ’space-between’ | "Космос вокруг"
- Выравнивает детей по основным направлениям или главной оси
- Если flexDirection: ‘row’
Управляет выравниванием элементов в контейнере по вертикали.
- Если flexDirection: ‘столбец’
Управляет выравниванием элементов в контейнере по горизонтали.
Выровнять элементы
alignItems: ‘flex-start’ | ’flex-end’ | ‘center’ | ’stretch’
- Выравнивает детей в поперечном направлении или поперечной оси
- AlignItems работает противоположно justifyContent.
- Если flexDirection: ‘row’
Управляет выравниванием дочерних элементов по горизонтали (ось Y).
- Если flexDirection: «столбец»
Управляет выравниванием дочерних элементов по вертикали (ось X).
- ‘flex-start’: свойство flex-start элемента alignItems перемещает все представления в горизонтальный верхний левый угол экрана.
2. 'flex-end': свойство flex-end элемента alignItems перемещает все представления в горизонтальную правую часть экрана устройства, если для параметра flexDirection установлено значение 'column', иначе нажмите. все виды в вертикальную нижнюю часть экрана устройства.
3. ‘center’: свойство center элемента alignItems установит все представления в центр экрана устройства по горизонтали.
4. ‘stretch’: свойство stretch объекта alignItems растягивает элементы в поперечном направлении или поперечной оси. Это свойство будет работать только размеры, не определенные в стиле.
когда flex-direction: 'row', он будет перемещать элементы в вертикальном направлении и наоборот в случае flex-direction: ' столбец '
AlignSelf
alignSelf: ‘flex-start’ | ’flex-end’ | ’center’ | ’stretch’
Align-self имеет те же параметры, что и align-items, но позволяет вам управлять выравниванием отдельных элементов.
Он выравнивает элемент по поперечной оси, т.е. работает в том же направлении, что и align-items. Он перезаписывает свойство align-Items родительского элемента
Flex Wrap
flexWrap: ‘wrap’, ‘nowrap’ (по умолчанию), ‘wrap-reverse
Гибкое обтекание определяет, должны ли гибкие элементы размещаться в одной строке или могут быть перенесены на несколько строк.
‘Nowrap’: элементы в контейнере flexbox хранятся в одной строке, даже если места недостаточно.
‘Wrap’: элементы переносятся на следующую строку, если в первой строке нет места.
‘Wrap-reverse’: элементы выравниваются снизу вверх.
гибко-расти
Любое значение с плавающей запятой ›= 0
По умолчанию для любого элемента установлено значение 0.
Если все элементы определены как 1, а один определен как 2, более крупный элемент займет пространство двух элементов «1».
гибко-усадочный
Любое значение с плавающей запятой ›= 0
По умолчанию для любого элемента установлено значение 1.
flexShrink сжимает дочерние элементы по главной оси в случае, если общий размер дочерних элементов превышает размер контейнера по главной оси.
Если все элементы определены как 1, а один определен как 3, более крупный элемент будет уменьшаться в 3 раза по сравнению с другими. Когда доступно меньше места, потребуется в 3 раза меньше места.
гибкая основа
Flex-base очень похож на ширину элемента, если его родительский контейнер имеет строку с гибким направлением, и аналогичен высоте элемента элемент, если его родительский контейнер имеет столбец гибкого направления.
Если задано значение auto, он изменяет размер элемента в соответствии с его шириной или высотой и добавляет дополнительное пространство на основе свойства flex-grow.
Если установлено значение 0, при расчете макета не добавляется дополнительное пространство для элемента.
Примечание. Если вы укажете числовое значение в пикселях, оно будет использоваться в качестве значения длины (ширина или высота зависит от того, является ли это строкой или элементом столбца).
Если вам действительно нравится эта статья, отправьте аплодисменты в знак признательности и с нетерпением жду ваших ценных отзывов.
