Розташування компонентів

В React Native можна розміщувати компоненти дітей за допомогою алгоритму Flexbox. Це зручно використовувати для адаптації верстки під різні розміри екранів.

Flex зазвичай використовують з властивостями flexDirection, alignItems та justifyContent.

Flexbox працює так само як і у веброзробці тільки з деякими винятками. flexDirection за замовчанням має значення column. alignContent за замовчанням має значення flex-start.

Flex

На кожен screen зазвичай створюють батьківський View із flex зі значенням 1. Стиль такого компонента заведено називати container. Це означає, що він займе увесь простір екрана пристрою. Всю наступну верстку сторінок роблять всередині цього компонента.

App.js

import { StyleSheet, Text, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Text in the top left corner</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Якщо всередині цього компонента створити три View компоненти, скажімо зі значенням flex 1, 2 і 3 відповідно, то отримаємо всередині батьківського компонента три блоки різної висоти. Розраховуються вони так. Складаємо всі значення flex: 1+2+3=6. І висота першого блоку складе 1/6, другого - 2/6 і третього - 3/6.

App.js

import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
      <View style={{ flex: 2, backgroundColor: "darkorange" }} />
      <View style={{ flex: 3, backgroundColor: "green" }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Flex Direction

Оскільки flexDirection за замовчанням має значення column, то смуги блоків всередині батьківського компонента будуть горизонтальні. Тобто елементи розташовуються один під одним. Якщо flexDirection зробити row, то елементи розташуються зліва направо. Також є значення column-reverse і row-reverse.

App.js

import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={{ flex: 1, backgroundColor: "red" }} />
      <View style={{ flex: 2, backgroundColor: "darkorange" }} />
      <View style={{ flex: 3, backgroundColor: "green" }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
  },
});

Justify Content

justifyContent описує, як вирівняти дочірні елементи вздовж головної осі. Приймає значення: flex-start, flex-end, center, space-between, space-around, space-evenly. Мабуть, найчастіше дизайнерам хочеться центрувати компоненти.

App.js

import { StyleSheet, View, Text } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Text in the left center</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
  },
});

У вищенаведеному прикладі головна вісь проходить згори вниз, тому компоненти дітей розташуються по центу вздовж висоти, але за замовчанням зліва.

Align Items

alignItems описує, як вирівняти дочірні елементи вздовж поперечної осі батьківського контейнера. Приймає значення: stretch, flex-start, flex-end, center, baseline.

App.js

import { StyleSheet, View, Text } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Text in the center</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
});

Flex Wrap

Властивість flexWrap встановлюють для батьківського контейнера. Вона контролює розташування (перенесення) контенту вздовж головної осі. якщо wrap, то контент переноситиметься, якщо ні то його не буде видно за межами View.

App.js

import { StyleSheet, SafeAreaView, View } from "react-native";

const Rectangle = ({ bg, customWidth }) => {
  customWidth = Number(customWidth);
  return (
    <View
      style={{ height: 50, backgroundColor: bg, width: customWidth }}
    ></View>
  );
};

export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Rectangle bg="red" customWidth="200" />
      <Rectangle bg="blue" customWidth="150" />
      <Rectangle bg="green" customWidth="70" />
      <Rectangle bg="yellow" customWidth="30" />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexWrap: "wrap",
    flexDirection: "row",
  },
});

В цьому прикладі використано компонент SafeAreaView, який розмістить наші компоненти нижче StatusBar. Використано для наочності flexWrap, щоб ніщо не заважало огляду.

Row Gap, Column Gap та Gap

Параметри rowGap, columnGap та gap встановлюють для батьківського контейнера. Вони відповідно визначають відстань між сусідніми дочірніми компонентами між рядками, між стовпчиками та між стовпчиками та рядками в одному параметрі, якщо значення однакові. Причому rowGap та columnGap мають пріоритет.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexWrap: "wrap",
    flexDirection: "row",
    rowGap: 10,
    columnGap: 5,
    gap: 15,
  },
});

Ширина і висота

Параметри width та height можуть бути задані в пікселях (просто числом без жодних одиниць, як ми це робили вище), у відсотках і auto. Якщо задано у відсотках, то дочірній елемент буде займати відповідний відсоток батьківського компонента. auto - дефолтне значення і визначається в залежності від вмісту компонента і паддінгів (за замовчанням хоче якомога вужче "огорнути" свій вміст). У прикладі батьківський контейнер займає весь екран (бо, flex: 1), а дочірній компонент займає 100 пікселів по висоті та 50% від батьківського контейнера по ширині.

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rectangle: {
    height: 100,
    backgroundColor: "red",
    width: "50%",
  },
});

Позиціонування

В React Native можна спозиціонувати компоненти використавши параметр position. Він приймає два значення: relative (за замовчанням) і absolute. relative позиціонує компонент відносно його місця в потоці (і не впливає на сусідні елементи). absolute - позиціонує компонент відносно вʼюпорту. Для позиціонування використовують параметри top, right, bottom, та left.

App.js

import { StyleSheet, View } from "react-native";

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.rectangle}></View>
      <View style={styles.rectangleRelative}></View>
      <View style={styles.rectangleAbsolute}></View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  rectangle: {
    height: 40,
    width: 40,
    backgroundColor: "red",
  },
  rectangleRelative: {
    height: 40,
    width: 40,
    backgroundColor: "blue",
    position: "relative",
    top: 40,
    left: 40,
  },
  rectangleAbsolute: {
    height: 40,
    width: 40,
    backgroundColor: "green",
    position: "absolute",
    top: 40,
    left: 40,
  },
});

Результат може здатися спочатку трохи незвичним. Зелений квадрат спозиціоновано absolute. Зсунуто на 40 пікселів згори і на 40 пікселів зліва відносно вʼюпорту. Синій квадрат спозиціоновано relative. Тобто зсунуто на 40 пікселів згори і 40 пікселів зліва відносно його попереднього положення. Але треба памʼятати, що вісь іде не зліва направо, а згори вниз. Тому і такий результат.

Про Layout Direction, Align Self, Align Content, Flex Basis, Grow, Shrink та інші налаштування можна докладніше прочитати в офіційній документації.

Посилання на офіційну документацію:

Layout with Flexbox