Tìm hiểu 5 Core Components quan trọng nhất trong React Native

Nếu bạn đã từng chơi xếp hình Lego, bạn sẽ biết rằng dù một mô hình có khổng lồ và phức tạp đến đâu (như một tòa lâu đài hay một chiếc phi thuyền), chúng đều được tạo nên từ việc ghép nối những viên gạch cơ bản nhất.

Lập trình giao diện trong React Native cũng giống hệt như vậy. Bạn không cần phải tạo ra các nút bấm hay khung hình từ con số không. React Native cung cấp sẵn cho bạn một bộ công cụ gọi là Core Components (Các thành phần cốt lõi). Bằng cách kết hợp chúng lại với nhau, bạn có thể xây dựng giao diện của Facebook, TikTok hay bất kỳ ứng dụng nào bạn muốn.

Trong bài viết này, chúng ta sẽ học cách làm chủ 5 "viên gạch" quan trọng nhất: View, Text, Image, TextInput và ScrollView.

1. View: "Chiếc hộp vạn năng"

Trong thế giới lập trình Web, chúng ta có thẻ <div> để gom nhóm các phần tử lại với nhau. Trong React Native, chúng ta dùng <View>.

Vai trò của View: View bản chất là một chiếc hộp rỗng. Nó không hiển thị bất kỳ văn bản hay hình ảnh nào nếu đứng một mình. Nhiệm vụ duy nhất của nó là bọc, nhóm và bố cục các thành phần khác.

Ví dụ, khi bạn nhìn thấy một bức ảnh đại diện (Avatar) đặt cạnh một dòng Tên người dùng, cả hai thứ đó thường được gói gọn chung vào một thẻ <View>.

import { View, Text } from 'react-native'

export default function App() {
  return (
    <View style={{ padding: 20, backgroundColor: '#f0f0f0' }}>
      <Text>Đây là nội dung nằm trong chiếc hộp View</Text>
    </View>
  )
}

Lưu ý: View tự động chuyển đổi thành UIView trên iOS và ViewGroup trên Android.

2. Text: Nơi hiển thị mọi văn bản

Khác với Web (nơi bạn có thể gõ chữ trực tiếp vào giữa thẻ <div>), trong React Native, mọi văn bản đều bắt buộc phải được đặt bên trong thẻ <Text>. Nếu bạn để một chữ cái rớt ra ngoài thẻ này, ứng dụng của bạn sẽ báo lỗi đỏ màn hình ngay lập tức!

Thẻ <Text> hỗ trợ rất nhiều thuộc tính hữu ích:

• Rút gọn chữ nếu quá dài với dấu ... (thuộc tính numberOfLines).
• Đổi font chữ, màu sắc, in đậm, in nghiêng.

<Text numberOfLines={1} style={{ fontSize: 20, fontWeight: 'bold' }}>
  Dòng tiêu đề này rất dài và sẽ bị cắt bớt bằng dấu ba chấm nếu vượt quá giới hạn màn hình.
</Text>

3. Image: Đưa hình ảnh vào ứng dụng

Ứng dụng sẽ rất tẻ nhạt nếu thiếu hình ảnh. Thẻ <Image> trong React Native cho phép bạn hiển thị ảnh từ 2 nguồn chính: Ảnh tải trực tiếp từ mạng (Network) và Ảnh có sẵn trong máy (Local).

Cách 1: Hiển thị ảnh Local (Lấy từ thư mục assets)

Bạn sử dụng hàm require() để trỏ tới đường dẫn file. React Native sẽ tự động tính toán kích thước ảnh cho bạn.

<Image source={require('./assets/avatar.png')} />

Cách 2: Hiển thị ảnh từ Internet (Network)

Bạn phải truyền vào một object có chứa uri. Đặc biệt lưu ý: Đối với ảnh lấy từ mạng, bạn BẮT BUỘC phải quy định chiều rộng (width) và chiều cao (height), nếu không bức ảnh sẽ hoàn toàn tàng hình!

<Image
  source={{ uri: 'https://images.unsplash.com/photo-123456' }}
  style={{ width: 200, height: 200, borderRadius: 100 }}
/>

4. TextInput: Lắng nghe người dùng

Làm sao để người dùng đăng nhập, tìm kiếm hay nhắn tin? Đó là lúc bạn cần <TextInput>. Nó sẽ tự động bật bàn phím ảo của điện thoại lên khi người dùng chạm vào.

Để quản lý những gì người dùng đang gõ, chúng ta sẽ kết hợp <TextInput> với Hook useState mà bạn đã học ở Bài 4.

import React, { useState } from 'react'
import { View, TextInput, Text } from 'react-native'

export default function LoginScreen() {
  const [username, setUsername] = useState('')

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Nhập tên đăng nhập của bạn..."
        value={username}
        onChangeText={(text) => setUsername(text)} // Cập nhật state mỗi khi gõ
        style={{ borderWidth: 1, borderColor: 'gray', padding: 10 }}
      />
      <Text>Bạn đang gõ: {username}</Text>
    </View>
  )
}

5. ScrollView: "Giải cứu" nội dung khỏi màn hình nhỏ

Hãy tưởng tượng bạn có một bài báo rất dài. Trên lập trình Web, trình duyệt sẽ tự động thêm thanh cuộn (scroll bar) khi nội dung tràn ra khỏi cửa sổ.

Nhưng trên Mobile, mọi thứ lại khác! Nếu nội dung của bạn dài hơn chiều cao của màn hình điện thoại, phần bị tràn sẽ bị "cắt phăng" và biến mất. Người dùng vuốt mỏi tay cũng không thể xem được phần bên dưới.

Để giải quyết vấn đề này, bạn chỉ cần thay thẻ <View> bao bọc bên ngoài bằng thẻ <ScrollView>.

import { ScrollView, Text } from 'react-native'

export default function ArticleScreen() {
  return (
    <ScrollView style={{ padding: 15 }}>
      <Text style={{ fontSize: 24 }}>Tiêu đề bài báo</Text>
      <Text style={{ marginTop: 20 }}>Đoạn văn thứ nhất rất dài... (Lặp lại 100 lần để thấy thanh cuộn)</Text>
    </ScrollView>
  )
}

Lưu ý hiệu năng: ScrollView rất tuyệt vời cho các bài viết, trang cài đặt hoặc nội dung có độ dài vừa phải. Tuy nhiên, nếu bạn muốn làm một bảng tin (Newfeed) chứa hàng ngàn bài đăng như Facebook, việc dùng ScrollView sẽ làm tràn bộ nhớ và giật lag máy. Khi đó, chúng ta sẽ cần đến "vũ khí tối thượng" mang tên FlatList (sẽ được bật mí ở giai đoạn sau của series).

Kết luận: Chỉ cần nắm rõ các Core Components

Giao diện ứng dụng suy cho cùng chỉ là sự sắp xếp khéo léo của các Core Components:

• Dùng View để làm khung chứa.
• Dùng Text để hiển thị chữ.
• Dùng Image để làm đẹp bằng hình ảnh.
• Dùng TextInput để tương tác nhập liệu.
• Dùng ScrollView để nội dung có thể vuốt lên xuống.

Lúc này, bạn đã có đủ gạch để xây nhà. Nhưng ngôi nhà hiện tại trông vẫn khá lộn xộn vì các viên gạch đang nằm chồng chéo lên nhau. Để sơn sửa, sắp xếp bố cục cho app trông chuyên nghiệp và đẹp mắt như thiết kế, chúng ta sẽ cùng bước sang bài tiếp theo.