Các core component trong React Native là gì?

Question

Accepted Answer

React Native cung cấp một tập **core component** — như **View**, **Text**, **Image**, **ScrollView**, **TextInput** — ánh xạ tới các phần tử UI native. Chúng là các khối xây dựng cơ bản của UI React Native, được dùng thay cho các phần tử HTML web. ## Core component (so với HTML web) ```text React Native dùng component RIÊNG của nó (ánh xạ tới view native), KHÔNG phải HTML: VIEW → một container (như

) — khối xây dựng layout cơ bản TEXT → hiển thị text (MỌI text phải nằm trong một , khác với web) IMAGE → hiển thị hình ảnh (local hoặc remote) TEXTINPUT → ô nhập text (như ) SCROLLVIEW → một container cuộn được FLATLIST → một LIST cuộn được hiệu quả (cho list dài — render lazily) TOUCHABLEOPACITY / PRESSABLE → xử lý chạm (vùng có thể chạm) BUTTON → một nút cơ bản ``` ## Ví dụ ```jsx import { View, Text, Image, TextInput, TouchableOpacity } from 'react-native'; function Profile() { return ( {/* container (như một div) */} Ann {/* text PHẢI nằm trong */} {}}> Submit ); } ``` ## Các khác biệt chính so với web ```text ✓ Dùng chứ không phải

, chứ không phải

/; MỌI text phải nằm trong ✓ Không có class/file CSS — STYLING qua prop style (object JS, StyleSheet) — xem phần styling ✓ Dùng Touchable/Pressable cho tương tác (không phải onClick trên div) ✓ Dùng FlatList cho list dài (hiệu quả) — không map qua mọi thứ ``` ## Tại sao điều này quan trọng Hiểu các core component là nền tảng cho việc phát triển React Native vì **chúng là khối xây dựng của mọi UI React Native** — bạn kết hợp chúng để xây dựng giao diện, nên đây là kiến thức nền tảng buộc phải biết. React Native cung cấp **các component riêng** ánh xạ tới view native (thay vì các phần tử HTML web), và hiểu những cái thiết yếu — **View** (container, như một div), **Text** (cho mọi text, với quy tắc quan trọng là mọi text phải nằm trong một component Text, khác với web), **Image**, **TextInput**, **ScrollView**, **FlatList** (cho list dài hiệu quả), và touchable/**Pressable** (để xử lý chạm) — là cần thiết để xây dựng bất kỳ UI React Native nào. Hiểu **các khác biệt chính so với web** đặc biệt quan trọng với lập trình viên web/React chuyển sang React Native: dùng View thay vì div và Text thay vì p/span (với quy tắc mọi text trong Text), styling qua prop style chứ không phải class/file CSS, dùng touchable/Pressable cho tương tác chứ không phải onClick, và dùng **FlatList cho list dài** (render hiệu quả/lazily) chứ không map qua mọi thứ — những khác biệt này là điểm vấp ngã phổ biến mà việc hiểu các core component sẽ làm rõ. Các component kết hợp với nhau (như React) để xây dựng UI, với View là container nền tảng. Vì các core component là khối xây dựng của mọi UI React Native (bạn dùng chúng liên tục để dựng giao diện) và hiểu chúng cùng cách chúng khác với HTML web là nền tảng để xây dựng ứng dụng React Native (đặc biệt với lập trình viên web), hiểu các core component là kiến thức React Native thiết yếu, nền tảng — vốn từ vựng cơ bản của UI React Native, cần thiết để xây dựng bất kỳ giao diện nào và để chuyển đổi kiến thức web React sang mô hình component native, một năng lực cốt lõi cho việc phát triển React Native.