react-native-zoom-image
Thành phần ZoomImage cho Ứng Dụng React Native (ios / android)
Chỉ hoạt động với hình ảnh mạng https [Với sự hạn chế của react-native hiện tại, chúng ta không thể lấy kích thước gốc của các hình ảnh cần thiết. Thành phần này chỉ thu phóng chúng với kích thước cung cấp (do thuộc tính
imgStyleđưa ra)]Nếu bạn cần hỗ trợ hình ảnh mạng http, vui lòng sửa info.plist nhé 🙂
Ví dụ
Cách sử dụng
cài đặt từ npm
npm install --save react-native-zoom-image
nhập vào dự án
import ZoomImage from 'react-native-zoom-image';
import {Easing} from 'react-native'; // import Easing if you want to customize easing function
let styles = {
img: {} // custom styles of original image component
};
// in render function
<ZoomImage
source={{uri: 'https://ooo.0o0.ooo/2017/03/31/58de0e9b287f6.jpg'}}
imgStyle={{width: 250, height: 230}}
style={styles.img}
duration={200}
enableScaling={false}
easingFunc={Easing.ease}
/>
Thuộc tính
| Thuộc tính | Kiểu | Mặc định | Mô tả |
|---|---|---|---|
| disabled | bool | false | Cho phép tắt thành phần hoặc không. |
| startCapture | bool | false | Cho phép bắt sự kiện chạm bắt đầu hoặc không. |
| moveCapture | bool | false | Cho phép bắt sự kiện di chuyển hoặc không. |
| responderNegotiate | function | – | Sử dụng điều kiện tùy chỉnh để bật hoặc tắt cử chỉ trên màn hình hình ảnh. |
| easingFunc | function | Easing.linear | Hàm làm mượt của hoạt ảnh. |
| showDuration | number | 100 | Thời gian hiển thị hình ảnh. |
| closeDuration | number | 140 | Thời gian đóng cửa sổ hình ảnh. |
| rebounceDuration | number | 800 | Tổng thời gian đặt lại vị trí hình ảnh. Thời gian thực tế thay đổi theo sự thay đổi vị trí của hình ảnh theo trục Y. Nếu sự thay đổi bằng chiều cao của màn hình, thời gian sẽ là 800ms. |
| enableScaling | bool | false | Cho phép tỷ lệ hình ảnh khi nó được kéo. |
Phương thức thể hiện
| Phương thức | Tham số | Mô tả |
|---|---|---|
| openModal | – | Mở cửa sổ hình ảnh |
| closeModal | – | Đóng cửa sổ hình ảnh. |
Chi tiết tải về:
Tác giả: Tinysymphony
Nguồn: https://github.com/Tinysymphony/react-native-zoom-image
Giấy phép: MIT license
