Урок 02

Layout: Flexbox подробно

Flexbox в React Native — единственный способ вёрстки. Никаких grid, float, table.

Отличия от CSS Flexbox

CSS	React Native
`display: flex`	Всегда включён
`flex-direction: row` по умолчанию	`column` по умолчанию
`flex: 1 1 auto`	`flex: 1`
`%` для размеров	Числа и `flex`
`gap` (поддержка)	`gap`, `rowGap`, `columnGap`

flexDirection

<View style={{ flexDirection: 'column' }}>  {/* по умолчанию */}
<View style={{ flexDirection: 'row' }}>
<View style={{ flexDirection: 'row-reverse' }}>
<View style={{ flexDirection: 'column-reverse' }}>

justifyContent — главная ось

justifyContent: 'flex-start'     // в начало
justifyContent: 'flex-end'       // в конец
justifyContent: 'center'         // по центру
justifyContent: 'space-between'  // крайние у краёв
justifyContent: 'space-around'   // равные промежутки
justifyContent: 'space-evenly'   // одинаковые промежутки

alignItems — поперечная ось

alignItems: 'flex-start'  // в начало
alignItems: 'flex-end'    // в конец
alignItems: 'center'      // по центру
alignItems: 'stretch'     // растянуть (по умолчанию)
alignItems: 'baseline'    // по базовой линии

alignSelf

Переопределяет alignItems для конкретного элемента:

<View style={{ flexDirection: 'row', alignItems: 'flex-start' }}>
    <View style={styles.box} />
    <View style={[styles.box, { alignSelf: 'flex-end' }]} />
</View>

flex

flex: 1   // займёт доступное пространство

Пропорции:

<View style={{ flexDirection: 'row' }}>
    <View style={{ flex: 1 }} /> {/* 1/4 */}
    <View style={{ flex: 3 }} /> {/* 3/4 */}
</View>

flexGrow, flexShrink, flexBasis

flexGrow: 1      // как расти
flexShrink: 1    // как сжиматься
flexBasis: 100   // базовый размер

flex: 1 = flexGrow: 1, flexShrink: 1, flexBasis: 0.

flexWrap

flexWrap: 'nowrap'  // по умолчанию
flexWrap: 'wrap'    // перенос
flexWrap: 'wrap-reverse'

gap

Современный способ делать отступы между элементами:

<View style={{ flexDirection: 'row', gap: 12 }}>
    <View style={styles.box} />
    <View style={styles.box} />
</View>

<View style={{ gap: 8, rowGap: 12, columnGap: 16 }}>

Работает в React Native 0.71+.

Центрирование

По горизонтали и вертикали:

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>По центру</Text>
</View>

Размеры

width: 100
height: 200
minWidth: 50
maxWidth: 300

width: '100%'
height: '50%'

aspectRatio: 1  // квадрат
aspectRatio: 16 / 9

Позиционирование

position: 'relative'  // по умолчанию
position: 'absolute'

top: 0
right: 0
bottom: 0
left: 0

// центрирование absolute
position: 'absolute',
left: '50%',
transform: [{ translateX: -50 }],

zIndex

zIndex: 10

Работает как в CSS, но без контекста наложения.

Если ты уже знаешь React

В вебе — display: flex надо включать. В React Native flexbox всегда. flexDirection по умолчанию column, а не row. Это главное отличие.

Итоги

Flexbox всегда
column по умолчанию
gap вместо margin
flex: 1 для растяжения
alignSelf для исключений
aspectRatio для пропорций