Hình ảnh có khả năng thay đổi kích thước trong React Native
Component <Image/>
trong React Native does not keep the image aspect ratio, dẫn đến việc hình ảnh bị kéo dãn hoặc cắt bớt. react-native-scalable-image
giải quyết vấn đề này bằng cách tính toán kích thước hình ảnh và thay đổi kích thước khi hiển thị.
Thư viện này cung cấp một thành phần <Image/>
có khả năng tự động thay đổi chiều rộng hoặc chiều cao để giữ nguyên tỷ lệ khung hình. Nó hữu ích khi bạn không biết tỷ lệ khung hình trước (ví dụ: nội dung do người dùng tải lên) nhưng muốn hiển thị toàn bộ hình ảnh và giới hạn nó chỉ bằng chiều rộng hoặc chiều cao để vừa với thành phần chứa.
Ví dụ sau tạo một hình ảnh phù hợp với chiều rộng màn hình đầy đủ và giữ nguyên tỷ lệ khung hình:
import React from 'react';
import { Dimensions } from 'react-native';
import Image from 'react-native-scalable-image';
const image = (
<Image
width={Dimensions.get('window').width} // height will be calculated automatically
source={{uri: '<image uri>'}}
/>
);
Cài đặt
npm install react-native-scalable-image --save
Sử dụng
Xác định chiều rộng hoặc chiều cao có thể được tính toán động như trong ví dụ trên. Tất cả các thuộc tính khác giống như trong React Native
Các thuộc tính
Tên | Kiểu | Mặc định | Mô tả |
---|---|---|---|
height |
số | không | Chiều cao tối đa của hình ảnh |
width |
số | không | Chiều rộng tối đa của hình ảnh |
background |
boolean | false | Đặt thành true khi sử dụng như nền |
component |
React.ReactNode | không | Thành phần hình ảnh tùy chỉnh |
onPress |
function | không | Gọi lại khi nhấp vào |
onSize |
function | không | Được gọi với { width, height } là đối số đầu tiên khi kích thước hình ảnh được tính toán |
Phiên bản
Phiên bản chính mới nhất của react-native-scalable-image
được thực hiện bằng hooks. Nếu bạn đang sử dụng phiên bản React trước khi có hooks, vui lòng sử dụng react-native-scalable-image
phiên bản 0.5.1
Phiên bản React | Phiên bản Hình ảnh có khả năng thay đổi kích thước |
---|---|
< 16.8 | 0.5.1 |
>= 16.8 | > 1.0.0 |
Chi tiết tải về:
Tác giả: ihor
Nguồn: https://github.com/ihor/react-native-scalable-image
Giấy phép: MIT license