Ảnh có đủ chiều ngang nhưng mất một phần nội dung ở hai bên, hoặc giữ nguyên nội dung nhưng xuất hiện khoảng trống. Trước khi đổi kích thước file nguồn, hãy xem riêng khung hiển thị và resizeMode. Đây là hai quyết định layout khác nhau.
Bài dùng cùng một ảnh minh họa của AeDev trong hai khung vuông. Tài liệu React Native được đối chiếu ngày 26/10/2026. Code đã được rà thủ công, chưa build hoặc kiểm tra trên thiết bị trong lượt biên tập; không có số đo hiệu năng tải hoặc bộ nhớ của ứng dụng thực tế.
1. Xác định kích thước hiển thị trước
Hướng dẫn Images lưu ý ảnh mạng cần kích thước hiển thị được xác định, khác với metadata ảnh static mà bundler đã biết. Trong ví dụ, parent có width và aspectRatio bằng 1, còn Image nhận toàn bộ chiều rộng, chiều cao của khung đó.
Layout props mô tả aspectRatio dùng để xác định chiều còn thiếu từ chiều đã có. Tỷ lệ 1 ở đây là lựa chọn cố ý để nhìn rõ khác biệt với ảnh nguồn nằm ngang; không phải tỷ lệ bắt buộc cho mọi card.
2. So sánh hai cách trong cùng điều kiện
Đặt component vào màn hình có parent giới hạn chiều cao và flex: 1. URL minh họa là ảnh public của AeDev; nếu thay ảnh khác, dùng một ảnh bạn được phép sử dụng và giữ nguồn giống nhau cho cả hai khung.
import React, {useState} from 'react';
import {Image, ScrollView, StyleSheet, Text, View} from 'react-native';
const imageUrl =
'https://aedev.net/wp-content/uploads/2026/07/featured-rn-style-layout-beginner.png';
function ComparisonFrame({mode}: {mode: 'cover' | 'contain'}) {
const [failed, setFailed] = useState(false);
return (
<View style={styles.section}>
<Text style={styles.label}>{mode}</Text>
<View style={styles.frame}>
{failed ? (
<Text style={styles.error}>Không tải được ảnh minh họa</Text>
) : (
<Image
source={{uri: imageUrl}}
style={styles.image}
resizeMode={mode}
accessibilityLabel={`Minh họa layout, chế độ ${mode}`}
onError={() => setFailed(true)}
/>
)}
</View>
</View>
);
}
export default function ImageComparison() {
return (
<ScrollView style={styles.screen} contentContainerStyle={styles.page}>
<ComparisonFrame mode="cover" />
<ComparisonFrame mode="contain" />
</ScrollView>
);
}
const styles = StyleSheet.create({
screen: {flex: 1},
page: {padding: 16},
section: {marginBottom: 24},
label: {fontSize: 18, fontWeight: '600', marginBottom: 8},
frame: {width: '100%', maxWidth: 360, aspectRatio: 1, alignSelf: 'center',
justifyContent: 'center', alignItems: 'center', backgroundColor: '#e8edf3'},
image: {width: '100%', height: '100%'},
error: {fontSize: 16, padding: 16},
});Mỗi khung có trạng thái lỗi riêng. Demo không tự retry hoặc thay URL sau lỗi. Nếu mở rộng component để nhận URL thay đổi, cần thiết kế việc reset trạng thái theo nguồn mới thay vì giữ lỗi của lần tải trước.
3. Đọc đúng ý nghĩa cover và contain
Theo tham chiếu Image, cover giữ tỷ lệ ảnh và co giãn đến khi phủ kín khung; phần vượt ra ngoài khung có thể bị cắt. Contain cũng giữ tỷ lệ nhưng đặt toàn bộ ảnh bên trong khung, nên có thể còn khoảng trống khi hai tỷ lệ khác nhau.
Với ảnh nằm ngang đặt trong khung vuông, kỳ vọng cover mất bớt nội dung ngang còn contain giữ toàn ảnh và có vùng trống theo chiều dọc. Màu nền của frame trong ví dụ giúp bạn nhìn vùng không được ảnh lấp đầy. Hãy thử cả ảnh dọc để thấy hướng cắt hoặc khoảng trống thay đổi.
Chọn cover khi sản phẩm chấp nhận crop để giữ card đồng đều. Chọn contain khi cần nhìn toàn bộ sơ đồ, tài liệu hoặc nội dung mà crop có thể làm mất thông tin. Đây là lựa chọn theo nội dung và yêu cầu hiển thị, không phải phép xếp hạng mode nào đẹp hơn trong mọi tình huống.
4. ResizeMode không thay hợp đồng layout
Đổi cover thành contain không tự quyết định parent phải cao bao nhiêu. Nếu parent không có chiều cao xác định hoặc tỷ lệ được suy ra phù hợp, bạn vẫn có thể gặp một ảnh không xuất hiện như mong muốn. Kiểm tra kích thước container trước khi kết luận request ảnh thất bại.
Stretch là một lựa chọn khác có thể đổi tỷ lệ giữa hai chiều. Không dùng nó để giấu việc khung và ảnh không cùng tỷ lệ nếu nội dung cần giữ hình dạng. Ngoài ra, resizeMode không tự làm file tải về nhỏ đi; lựa chọn kích thước nguồn và cách phân phối ảnh là bài toán cần đánh giá riêng.
Kiểm tra tải thành công và tải lỗi
Trước tiên thử URL hợp lệ, đối chiếu cùng các chi tiết ở mép ảnh để thấy phần crop. Sau đó dùng một URL lỗi trong bản thử riêng và xác nhận onError đưa khung sang thông báo. Nếu ảnh vẫn xuất hiện khi tắt mạng, cân nhắc ảnh có thể đã ở cache; đừng dùng một thao tác đó làm bằng chứng chắc chắn về đường lỗi.
Thử màn hình hẹp, xoay máy theo cấu hình app cho phép và tăng cỡ chữ cho label, thông báo lỗi. Demo chưa kiểm chứng screen reader hoặc mọi safe area; bổ sung các ca đó theo tiêu chuẩn giao diện của dự án.
Lỗi thường gặp và kết luận
Nhầm khoảng trống của contain với tải ảnh thất bại, dùng cover cho nội dung không được phép crop hoặc sửa resizeMode để chữa parent chưa có kích thước là các lỗi dễ gặp. Hãy tách ba câu hỏi: khung lớn bao nhiêu, ảnh được đặt vào khung thế nào và nguồn có tải được không.
Khi ba phần được quan sát riêng, bạn có thể chọn mode theo nội dung và xử lý lỗi tải rõ ràng mà không phải thay đổi file ảnh nguồn theo phỏng đoán.
