Flexbox trong React Native cho người mới: row, column và căn chỉnh UI

React Native dùng Flexbox làm cơ chế layout chính. Nếu bạn từng học Flexbox trên web, nhiều khái niệm sẽ quen thuộc. Nhưng có một điểm khác quan trọng: trong React Native, mặc định flexDirection là column, không phải row.

Hiểu Flexbox giúp bạn trả lời các câu hỏi rất thực tế: làm sao để căn giữa một khối, chia hai cột, đẩy nút xuống cuối màn hình, tạo khoảng cách giữa item, hoặc làm một phần chiếm hết không gian còn lại.

flexDirection: trục chính đi theo chiều nào?

flexDirection quyết định các phần tử con được xếp theo chiều dọc hay chiều ngang. Mặc định trong React Native là column, nghĩa là item xếp từ trên xuống dưới.

const styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
  },
  row: {
    flexDirection: 'row',
    alignItems: 'center',
  },
});

Khi làm mobile UI, column rất tự nhiên cho cả màn hình, còn row thường dùng cho các phần nhỏ như avatar + tên, icon + label, hoặc hai nút cạnh nhau.

justifyContent: căn theo trục chính

justifyContent căn item theo trục chính. Nếu flexDirection là column, trục chính là chiều dọc. Nếu là row, trục chính là chiều ngang.

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

Ví dụ trên căn nội dung vào giữa theo chiều dọc vì container đang theo mặc định column.

alignItems: căn theo trục phụ

alignItems căn item theo trục còn lại. Với layout column, nó căn theo chiều ngang. Với layout row, nó căn theo chiều dọc.

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

Cặp justifyContent: 'center' và alignItems: 'center' là cách căn giữa cả hai chiều phổ biến nhất.

flex: 1 nghĩa là gì?

flex: 1 thường nghĩa là “chiếm phần không gian còn lại”. Khi một screen container có flex: 1, nó có thể phủ toàn bộ vùng hiển thị. Khi một child có flex: 1, nó sẽ giãn để chiếm không gian trong parent.

function Screen() {
  return (
    <View style={styles.screen}>
      <View style={styles.content}>
        <Text>Nội dung chính</Text>
      </View>
      <Button title="Tiếp tục" onPress={() => {}} />
    </View>
  );
}

const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16 },
  content: { flex: 1, justifyContent: 'center' },
});

Ở ví dụ này, phần content chiếm không gian còn lại, còn button nằm phía dưới.

Ví dụ card có avatar và nội dung

function UserRow() {
  return (
    <View style={styles.row}>
      <View style={styles.avatar} />
      <View style={styles.info}>
        <Text style={styles.name}>Nguyen Dev</Text>
        <Text style={styles.role}>React Native Developer</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },
  avatar: {
    width: 48,
    height: 48,
    borderRadius: 24,
    backgroundColor: '#38bdf8',
  },
  info: {
    flex: 1,
  },
  name: { fontSize: 16, fontWeight: '700' },
  role: { marginTop: 4, color: '#6b7280' },
});

info: { flex: 1 } giúp phần text chiếm phần ngang còn lại sau avatar.

Lỗi thường gặp

Lỗi đầu tiên là quên rằng mặc định là column. Lỗi thứ hai là dùng justifyContent và alignItems ngược trục. Lỗi thứ ba là đặt flex: 1 ở quá nhiều nơi mà không hiểu parent có kích thước ra sao. Lỗi thứ tư là dùng width cố định quá nhiều khiến UI không responsive.

Kết luận

Flexbox không cần học quá rộng ngay từ đầu. Hãy nắm chắc bốn thứ: flexDirection, justifyContent, alignItems và flex. Với bốn công cụ đó, bạn đã dựng được phần lớn layout mobile cơ bản.

Nguồn tham khảo: React Native: Flexbox, Height and Width.