React Native / Flexbox layout

Flexbox layout

React Native-д бүх View автоматаар Flexbox ашигладаг. Flexbox бол element-үүдийг эгнээнд эсвэл баганад зохион байгуулах систем. Нэг удаа сайн ойлговол дурын нарийн layout-ийг хийж чадна — энэ бол React Native-н layout-н гол мэдлэг.

Үндсэн тэнхлэгүүд

Flexbox-д хоёр тэнхлэг байдаг:

  • Main axis (үндсэн тэнхлэг) — flexDirection-оор тодорхойлогдоно
  • Cross axis (хөндлөн тэнхлэг) — үндсэнтэй перпендикуляр

React Native-д flexDirection-н анхдагч утга нь 'column' — элементүүд дороос доош эгнэнэ. Вэбийн CSS-д 'row' байдагтай харьцуулбал эсрэг.

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

export default function App() {
  return (
    <View style={styles.container}>
      {/* Баганад (column) — анхдагч */}
      <View style={styles.column}>
        <View style={styles.box}>
          <Text style={styles.label}>1</Text>
        </View>
        <View style={styles.box}>
          <Text style={styles.label}>2</Text>
        </View>
        <View style={styles.box}>
          <Text style={styles.label}>3</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: "#0b1120", padding: 20 },
  column: { flexDirection: "column", gap: 8 },
  box: {
    backgroundColor: "#22d3ee",
    padding: 16,
    borderRadius: 8,
    alignItems: "center",
  },
  label: { color: "#0b1120", fontWeight: "bold", fontSize: 16 },
});

justifyContent ба alignItems

Эдгээр хоёр өмч нь element-үүдийг тэнхлэгийн дагуу байршуулдаг:

justifyContent — үндсэн тэнхлэгийн дагуу байршуулна:

  • 'flex-start' — эхлэлд (анхдагч)
  • 'flex-end' — төгсгөлд
  • 'center' — голд
  • 'space-between' — хоорондын зайг тэгш хуваана
  • 'space-around' — эргэн тойрон тэгш зай

alignItems — хөндлөн тэнхлэгийн дагуу байршуулна:

  • 'flex-start' — зүүн/дээр
  • 'flex-end' — баруун/доор
  • 'center' — голд
  • 'stretch' — сунгана (анхдагч)
jsx
const styles = StyleSheet.create({
  // Дэлгэцийн яг голд байршуулах
  centered: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#0b1120",
  },

  // Хэвтээ эгнээ, тэгш зайтай
  row: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    padding: 16,
  },
});

flex: 1 гэж юу гэсэн үг вэ?

flex: 1 нь "боломжтой бүх зайг эзэл" гэсэн утгатай. Хоёр element хоёулаа flex: 1 байвал тэнцүү хуваана. flex: 2 нь flex: 1-ийнхээс хоёр дахин их зай авна:

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={[styles.panel, { flex: 1, backgroundColor: "#1e3a5f" }]} />
      <View style={[styles.panel, { flex: 2, backgroundColor: "#0f172a" }]} />
      <View style={[styles.panel, { flex: 1, backgroundColor: "#1e3a5f" }]} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    backgroundColor: "#0b1120",
  },
  panel: {
    borderWidth: 1,
    borderColor: "#1e293b",
  },
});

Дотроос нь: нийт 4 flex unit байгаа тул дунд нь 2/4 = 50%, хажуу талууд тус бүр 1/4 = 25% авна.

Бодит жишээ: navigation bar

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

export default function NavBar() {
  return (
    <View style={styles.navbar}>
      <Text style={styles.logo}>ulaanbaatar.app</Text>
      <View style={styles.actions}>
        <Text style={styles.link}>Сургалтууд</Text>
        <Text style={styles.link}>Профайл</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  navbar: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    backgroundColor: "#0f172a",
    paddingHorizontal: 20,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: "#1e293b",
  },
  logo: {
    fontSize: 16,
    fontWeight: "bold",
    color: "#22d3ee",
  },
  actions: {
    flexDirection: "row",
    gap: 20,
  },
  link: {
    fontSize: 14,
    color: "#94a3b8",
  },
});

Дараагийн хичээлд:

Flexbox-оор layout хийж сурлаа. Дараагийн хичээлд TouchableOpacity ба Pressable — хэрэглэгч дарахад хариу үйлдэл хийдэг товч, дарах элементүүдийг хийнэ. Апп интерактив болно!

← Өмнөх хичээлStyleSheet үндэсДараах хичээл →TouchableOpacity ба Pressable