Khóa học react-native

View trong React Native

0 phút đọc

View là một trong những thành phần cơ bản và quan trọng nhất trong React Native, tương tự như thẻ <div> trong HTML. Nó được sử dụng để tạo ra các container và bố trí các thành phần giao diện người dùng khác. View có thể chứa các thành phần khác như Text, Image, hoặc thậm chí là các View khác. Nó cung cấp các tính năng như bố trí bằng Flexbox, xử lý sự kiện chạm, và hỗ trợ các thuộc tính style.

Cú Pháp Cơ Bản

Để sử dụng View trong React Native, bạn cần import nó từ thư viện react-native và sử dụng nó như một thành phần bao bọc các thành phần khác.

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text>Hello, World!</Text>
    </View>
  );
};

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

export default App;

Các Thuộc Tính Quan Trọng của View

style

Thuộc tính style cho phép bạn áp dụng các kiểu dáng cho View, chẳng hạn như kích thước, màu nền, lề, đệm, và nhiều hơn nữa.

Ví dụ:

<View style={{ width: 100, height: 100, backgroundColor: "blue" }} />

flexDirection

Thuộc tính flexDirection xác định hướng của các thành phần con trong View. Các giá trị có thể bao gồm row, column, row-reverse, và column-reverse.

Ví dụ:

<View style={{ flexDirection: "row" }}>
  <View style={{ width: 50, height: 50, backgroundColor: "red" }} />
  <View style={{ width: 50, height: 50, backgroundColor: "green" }} />
  <View style={{ width: 50, height: 50, backgroundColor: "blue" }} />
</View>

justifyContent

Thuộc tính justifyContent xác định cách các thành phần con được phân bố dọc theo trục chính. Các giá trị có thể bao gồm flex-start, center, flex-end, space-between, space-around, và space-evenly.

Ví dụ:

<View style={{ flexDirection: "row", justifyContent: "space-between" }}>
  <View style={{ width: 50, height: 50, backgroundColor: "red" }} />
  <View style={{ width: 50, height: 50, backgroundColor: "green" }} />
  <View style={{ width: 50, height: 50, backgroundColor: "blue" }} />
</View>

alignItems

Thuộc tính alignItems xác định cách các thành phần con được căn chỉnh dọc theo trục phụ. Các giá trị có thể bao gồm flex-start, center, flex-end, và stretch.

Ví dụ:

<View style={{ flexDirection: "row", alignItems: "center" }}>
  <View style={{ width: 50, height: 50, backgroundColor: "red" }} />
  <View style={{ width: 50, height: 100, backgroundColor: "green" }} />
  <View style={{ width: 50, height: 150, backgroundColor: "blue" }} />
</View>

margin và padding

Thuộc tính marginpadding xác định khoảng cách bên ngoài và bên trong của View.

Ví dụ:

<View style={{ margin: 10, padding: 20, backgroundColor: "yellow" }}>
  <Text>Content with margin and padding</Text>
</View>

Ví Dụ Chi Tiết về View

Ví Dụ 1: Tạo Layout Cơ Bản

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

const BasicLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Header</Text>
      </View>
      <View style={styles.content}>
        <Text style={styles.contentText}>Content</Text>
      </View>
      <View style={styles.footer}>
        <Text style={styles.footerText}>Footer</Text>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    height: 50,
    backgroundColor: "lightcoral",
    justifyContent: "center",
    alignItems: "center",
  },
  headerText: {
    fontSize: 20,
    color: "white",
  },
  content: {
    flex: 1,
    backgroundColor: "lightblue",
    justifyContent: "center",
    alignItems: "center",
  },
  contentText: {
    fontSize: 18,
  },
  footer: {
    height: 50,
    backgroundColor: "lightseagreen",
    justifyContent: "center",
    alignItems: "center",
  },
  footerText: {
    fontSize: 20,
    color: "white",
  },
});

export default BasicLayout;

Hình ảnh minh họa:

Basic Layout

Ví Dụ 2: Sử Dụng Flexbox để Tạo Layout Phức Tạp

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

const ComplexLayout = () => {
  return (
    <View style={styles.container}>
      <View style={styles.row}>
        <View style={styles.box}>
          <Text>Box 1</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 2</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 3</Text>
        </View>
      </View>
      <View style={styles.row}>
        <View style={styles.box}>
          <Text>Box 4</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 5</Text>
        </View>
        <View style={styles.box}>
          <Text>Box 6</Text>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  row: {
    flexDirection: "row",
    marginBottom: 20,
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: "lightblue",
    justifyContent: "center",
    alignItems: "center",
    margin: 10,
  },
});

export default ComplexLayout;

Hình ảnh minh họa:

Complex Layout

Các Kỹ Thuật Tối Ưu Hóa Sử Dụng View

Sử Dụng StyleSheet để Tối Ưu Hóa Hiệu Suất

Sử dụng StyleSheet.create để định nghĩa các style giúp tối ưu hóa hiệu suất vì các style được tạo ra chỉ một lần và được tham chiếu lại nhiều lần.

Ví dụ:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: "lightblue",
    margin: 10,
  },
});

Sử Dụng Inline Styles cho Các Thành Phần Đơn Giản

Đối với các thành phần đơn giản hoặc khi bạn cần thay đổi style động, bạn có thể sử dụng inline styles.

Ví dụ:

<View style={{ width: 100, height: 100, backgroundColor: "blue" }} />

Các Hạn Chế của View Component

Mặc dù View component trong React Native rất mạnh mẽ, nhưng nó cũng có một số hạn chế:

  1. Hiệu Suất: Khi sử dụng quá nhiều View lồng nhau, hiệu suất của ứng dụng có thể bị ảnh hưởng.
  2. Khả Năng Tái Sử Dụng: Việc sử dụng inline styles có thể làm giảm khả năng tái sử dụng các thành phần.
  3. Quản Lý Sự Kiện: View không hỗ trợ tất cả các sự kiện như các thành phần khác, ví dụ như sự kiện hover.

Kết Luận

View là một thành phần cơ bản và quan trọng trong React Native, giúp bạn tạo ra các container và bố trí các thành phần giao diện người dùng. Bằng cách hiểu rõ các thuộc tính và cách sử dụng View, bạn có thể tạo ra các giao diện người dùng mượt mà và hiệu quả. Hy vọng qua bài viết này, bạn đã có thể nắm bắt được cách sử dụng View trong React Native và áp dụng vào các dự án của mình.

Avatar
Được viết bởi

TechMely Team

Gợi ý câu hỏi phỏng vấn

entry

React Native là gì?

entry

VIEW trong SQL là gì?

entry

Làm thế nào để comment trong React?

Bình luận

Chưa có bình luận nào

Chưa có bình luận nào