mainam-react-native-scaleimage

Component React Native giúp ảnh tự scale theo tỷ lệ gốc khi truyền width, height hoặc đồng thời cả hai giá trị.

Cài đặt

yarn add mainam-react-native-scaleimage

Hoặc với npm:

npm install mainam-react-native-scaleimage

Peer dependencies

Thư viện này cần:

• react >= 16.8.0
• react-native >= 0.60.0

Cách dùng

Ảnh local

import ScaledImage from 'mainam-react-native-scaleimage';

<ScaledImage
  source={require('./assets/logo.png')}
  width={120}
/>

Ảnh remote

import ScaledImage from 'mainam-react-native-scaleimage';

<ScaledImage
  uri="https://example.com/banner.png"
  height={80}
/>

Giới hạn trong một khung

Khi truyền đồng thời width và height, ảnh sẽ được scale để nằm gọn trong khung đó mà vẫn giữ đúng tỷ lệ:

import ScaledImage from 'mainam-react-native-scaleimage';

<ScaledImage
  uri="https://example.com/poster.png"
  width={240}
  height={160}
  style={{ borderRadius: 12 }}
/>

Props

| Tên prop | Kiểu | Mô tả | | --- | --- | --- | | source | any | Nguồn ảnh local hoặc object source của React Native. | | uri | string | URL ảnh remote khi không dùng source. | | width | number | Chiều rộng mong muốn để tự tính chiều cao tương ứng. | | height | number | Chiều cao mong muốn để tự tính chiều rộng tương ứng. | | style | any | Style bổ sung truyền xuống Image. |

Hành vi scale

• Chỉ truyền width: thư viện giữ nguyên tỷ lệ và tự tính height.
• Chỉ truyền height: thư viện giữ nguyên tỷ lệ và tự tính width.
• Truyền cả width và height: thư viện scale ảnh để nằm gọn trong khung giới hạn.
• Không lấy được kích thước gốc: component sẽ fallback về style hiện có thay vì tạo kích thước lỗi.

Ghi chú

• Ưu tiên dùng source cho ảnh local.
• Dùng uri cho ảnh remote.
• Thư viện tương thích với React Native mới nhờ xử lý được cả hai kiểu export của resolveAssetSource.