Ứng dụng React Native hiển thị hình ảnh (local và remote) và đóng gói asset (font, v.v.). Hiểu cách tải hình ảnh hiệu quả, xử lý các độ phân giải khác nhau, và tối ưu hiệu năng hình ảnh là quan trọng cho UX và hiệu năng tốt.
{ } ;
Hình ảnh local dùng require (đóng gói); hình ảnh remote dùng một uri. Hình ảnh cần kích thước rõ ràng (width/height) — khác với web, chúng không tự co giãn theo file.
→ ĐỘ PHÂN GIẢI: cung cấp các biến thể @2x và @3x (logo.png, [email protected], [email protected]) → RN
chọn đúng cái theo mật độ thiết bị (sắc nét trên mọi màn hình)
→ resizeMode: cover / contain / stretch / center → cách hình ảnh vừa với khung của nó
✓ Dùng hình ảnh KÍCH THƯỚC PHÙ HỢP (đừng tải hình lớn vào view nhỏ — lãng phí
bộ nhớ/băng thông)
✓ FastImage (react-native-fast-image) → hiệu năng hình ảnh remote tốt hơn + CACHE
(cache hình ảnh để không tải lại; mượt hơn Image mặc định cho list)
✓ Dùng đúng FORMAT (WebP cho kích thước nhỏ hơn); lazy-load; placeholder khi đang tải
✓ Hình ảnh là nguồn vấn đề bộ nhớ / giật phổ biến trong list → tối ưu chúng
Hiểu cách xử lý hình ảnh và asset có giá trị vì hầu hết app đều hiển thị hình ảnh, và làm điều đó hiệu quả ảnh hưởng đến cả UX và hiệu năng, nên đây là kiến thức thực hành hữu ích.
Hiểu tải hình ảnh — hình ảnh local qua require (đóng gói tại thời điểm build), hình ảnh remote qua một uri, và điểm quan trọng là hình ảnh cần kích thước rõ ràng trong React Native (khác với web, chúng không tự co giãn) — là cần thiết để hiển thị bất kỳ hình ảnh nào.
Hiểu xử lý độ phân giải (cung cấp các biến thể @2x/@3x để React Native chọn đúng cái theo mật độ thiết bị cho hình ảnh sắc nét trên các màn hình) và resizeMode (cách hình ảnh vừa với khung của nó) là quan trọng cho hình ảnh trông đẹp trên các mật độ màn hình đa dạng của Android và iOS.
Quan trọng nhất, hiểu tối ưu hiệu năng hình ảnh có giá trị vì hình ảnh là nguồn vấn đề bộ nhớ và giật phổ biến (đặc biệt trong list): dùng hình ảnh kích thước phù hợp (không tải hình lớn vào view nhỏ, vốn lãng phí bộ nhớ và băng thông), dùng FastImage cho hiệu năng hình ảnh remote tốt hơn và cache (để hình ảnh không tải lại và list cuộn mượt — một cải thiện đáng kể so với Image mặc định cho list nhiều hình), dùng định dạng hiệu quả (WebP), và lazy-load với placeholder.
Các tối ưu này quan trọng vì app nhiều hình ảnh (phổ biến — feed, gallery, profile) có thể gặp vấn đề hiệu năng thực sự nếu hình ảnh không được xử lý tốt.
Vì hầu hết app hiển thị hình ảnh và xử lý chúng tốt (tải và kích thước đúng, các biến thể độ phân giải, và đặc biệt là tối ưu hiệu năng với cache và kích thước phù hợp) ảnh hưởng đến cả UX (hình ảnh sắc nét, tải mượt) và hiệu năng (tránh vấn đề bộ nhớ và giật), hiểu hình ảnh và asset trong React Native là kiến thức có giá trị, liên quan thực tiễn — quan trọng cho nhu cầu phổ biến là hiển thị hình ảnh, nơi hiểu việc tải, độ phân giải, và đặc biệt là tối ưu hiệu năng (cache, kích thước) là then chốt để xây dựng app giàu hình ảnh mượt mà, chỉn chu.