Используйте flexbox для создания гибких и адаптивных макетов в React Native.
Flexbox — это инструмент CSS, который позволяет создавать гибкие одномерные макеты. Это позволяет вам контролировать положение элементов внутри контейнера, чтобы у вас было больше контроля над представлением вашего контента на экране.
В этом руководстве показано, как использовать flexbox в React Native для создания гибких и адаптивных макетов. Вы узнаете, как позиционировать дочерние элементы элемента-контейнера, используя свойства flexbox.
Сравнение поведения Flexbox в React Native и веб-разработке
Если вы хотите организовать содержимое элемента контейнера с помощью flexbox в простом CSS, вам нужно использовать дисплей: гибкий свойство.
контейнер { отображать: гибкий; }Но с React Native вам не нужно устанавливать дисплей: гибкий свойство. Это связано с тем, что React Native по умолчанию использует flexbox для создания макетов.
Вот некоторые различия, о которых следует помнить как ведет себя flexbox при использовании для выравнивания элементов HTML
в веб-приложениях по сравнению с тем, как он ведет себя в React Native:- флексдиректион по умолчанию ряд в веб-приложениях, но по умолчанию столбец в React Native.
- alignContent по умолчанию потягиваться в веб-приложениях и гибкий старт в React Native.
- flexShrink по умолчанию 1 в Интернете и 0 в React Native.
Использование свойств Flexbox в React Native
Свойства Flexbox позволяют вам описать, как выравнивать дочерние элементы элемента-контейнера. Вам необходимо понимать эти свойства, чтобы создавать сложные макеты, соответствующие потребностям вашего приложения.
1. Использование свойства flex в React Native
сгибаться свойство определяет, как Вид компонент заполняет экран. Это свойство принимает целочисленное значение, большее или равное 0. Значение указывает долю экрана, Вид компонент должен занять место.
В этом примере вы создаете экран с одним представлением из Библиотека компонентов React Native:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
<>фонЦвет: "#A020F0", сгибаться: 1}} />
</>
)
}
Вот результат:
Здесь вы назначили 1 в качестве гибкого значения Вид компонент. Вид компонент занимает весь экран (100%), потому что вы разделили пространство на одну группу.
Давайте посмотрим на другой пример:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"
экспортпо умолчаниюфункцияПриложение() {
возвращаться (фонЦвет: "#A020F0", сгибаться: 1}} /> фоновый цвет: "# 7cb48f", сгибаться: 3 }} />
</View>
)
}
Вот результат:
Вот вам два Вид элементы внутри другого Вид элемент. Первый ребенок настроен на гибкий: 1, а второй установлен в гибкий: 3. Эти значения разделяют пространство между двумя дочерними элементами. Первый занимает 1/4 экрана, а второй — 3/4 экрана (экран разделен на 4 блока, потому что 1+3 = 4).
2. Использование свойства flexDirection в React Native
Если вы посмотрите на скриншот выше, вы увидите, что дочерние элементы расположены друг над другом. Это поведение flexbox по умолчанию в React Native (флексдиректион по умолчанию столбец ценить).
Вы также можете установить флексдиректион собственность на ряд, обратная колонка, и ряд-обратный. В следующем примере флексдиректион установлен на ряд, поэтому дочерние элементы располагаются рядом:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"константа стили = Таблица стилей.create({
контейнер: {
фоновый цвет: "#00FF00",
гибкий: 1,
выравнивание элементов: "центр",
flexDirection: "ряд",
},
квадрат: {
фоновый цвет: "#FF0000",
ширина: 98,
высота: 98,
допуск: 4,
},
});
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
</View>
)
}
Вот результат:
Настройка флексдиректион к ряд-обратный помещает детей бок о бок, но порядок меняется на противоположный. Точно так же обратная колонка размещает дочерние элементы друг над другом, но в последовательности, противоположной той, которая определена столбец.
3. Использование justifyContent в React Native
JustifyContent Свойство выравнивает дочерние элементы контейнера flexbox по основной оси. Если флексдиректион установлен на столбец, то основной осью является вертикальная ось. Если он установлен на ряд, то он горизонтальный.
Возможные значения JustifyContentявляются гибкий старт, гибкий конец, центр, пространство между, пространство вокруг, и пространственно-равномерно.
В следующем примере флексдиректион настроен на строку и JustifyContentустановлен на гибкий старт:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"константа стили = Таблица стилей.create({
контейнер: {
фоновый цвет: "#00FF00",
гибкий: 1,
выравнивание содержимого: "гибкий старт",
flexDirection: "ряд",
},
квадрат: {
фоновый цвет: "#FF0000",
ширина: 98,
высота: 98,
допуск: 6,
},
});
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
</View>
)
}
Вот результат:
Если вы измените флексдиректион к столбец, гибкий старт будет применяться к вертикальной оси. Таким образом, коробки будут сложены друг на друга.
Параметр JustifyContent к центру (в то время как основная ось является столбец) центрирует три дочерних блока.
4. Использование alignItems в React Native
alignItems Свойство определяет размещение элементов в контейнере flexbox вдоль вторичной оси. Это противоположно JustifyContent. Как JustifyContent заботится о вертикальном выравнивании, alignItems обрабатывает горизонтальное выравнивание. Возможные значения alignItems являются гибкий старт, гибкий конец, центр, и исходный уровень.
В следующем примере флексдиректион установлен на ряд и alignItemsустановлен на гибкий старт:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"константа стили = Таблица стилей.create({
контейнер: {
фоновый цвет: "#00FF00",
гибкий: 1,
выравнивание элементов: "гибкий старт",
flexDirection: "ряд",
},
квадрат: {
фоновый цвет: "#FF0000",
ширина: 98,
высота: 98,
допуск: 6,
},
});
экспортпо умолчаниюфункцияПриложение() {
возвращаться (
</View>
)
}
Вот результат:
Если вы установите флексдиректион собственность на столбец и alignItems к центр, блоки будут размещены друг над другом, а дочерние элементы будут выровнены по центру.
5. Использование alignSelf в React Native
выравнивание себя свойство определяет, как отдельный дочерний элемент должен выравниваться в контейнере. Это переопределяет alignItems, а возможные значения гибкий старт, гибкий конец, центр, и исходный уровень.
В следующем примере мы устанавливаем значение по умолчанию alignItems свойство и переопределить его с помощью выравнивание себя:
Импортировать Реагировать от"реагировать"
Импортировать {Таблица стилей, вид} от"реагирующий натив"константа стили = Таблица стилей.create({
контейнер: {
фоновый цвет: "#00FF00",
гибкий: 1,
выравнивание элементов: "центр",
выравнивание содержимого: "центр",
flexDirection: "ряд",
},
квадрат: {
фоновый цвет: "#FF0000",
ширина: 98,
высота: 98,
допуск: 6,
},
});
экспортпо умолчаниюфункцияПриложение() {
возвращаться (выравнивание себя: "гибкий конец" }]} /> выравнивание себя: "гибкий старт" }]} />
)
}
Вот результат:
Другие свойства Flexbox
Есть два других свойства, которые вы можете использовать при создании макета flexbox в React Native:
- flexWrap: На случай, если дочерние элементы контейнера переполнятся. Использовать flexWrap чтобы указать, должны ли они быть сжаты в одну строку или заключены в несколько строк. Возможные значения для flexWrap являются сейчас и сворачивать.
- зазор: Вы используете зазор свойство, чтобы добавить промежутки между элементами сетки в контейнере. Его значение должно соответствовать размеру промежутка между элементами. Вы можете указать зазор свойство используя единицы CSS, такие как px, em или rem.
Узнайте больше о React Native
Теперь, когда вы понимаете, что такое flexbox, и знаете, как использовать его в своем приложении React Native для создания гибких и адаптивных макетов, пришло время погрузиться в мельчайшие детали React Native.