Trình trượt so sánh React Native: So sánh Hình Ảnh Cạnh Nhau dễ dàng

Trình trượt so sánh React Native

• Một thành phần đơn giản để hiển thị hai hình ảnh để so sánh với tính năng trượt qua.
• Giúp bạn so sánh hai hình ảnh
• Nhẹ nhàng, nhanh chóng, linh hoạt, có thể tùy chỉnh.
• Hỗ trợ cả thiết bị iOS và Android

Cài đặt

npm install --save react-native-comparison-slider

Require React-Native > 0.45.0

Demo

Mã ví dụ

PS: Để biết ví dụ chi tiết hơn, xem: react-native-comparison-slider-example -> để chạy ví dụ, di chuyển đến thư mục ví dụ và thực hiện react-native start, khởi chạy máy mô phỏng iOS bằng cách chạy react-native run-ios

Khi bạn muốn sử dụng trình trượt so sánh với các hình ảnh cục bộ, chỉ cần thêm các dòng sau đây:

import ComparisonSlider from "react-native-comparison-slider";

<ComparisonSlider 
  imageWidth={667}
  imageHeight={400}
  initialPosition={50}
  leftImage={require("./img/left.jpeg")}
  rightImage={require("./img/right.jpeg")} 
/>

Mã này sẽ sử dụng hình ảnh left.jpeg làm hình ảnh bên trái và right.jpeg làm hình ảnh bên phải. Trình trượt sẽ ở giữa hình ảnh (50). imageWidth và imageHeight là kích thước bạn muốn trình trượt so sánh của bạn có.

Khi bạn muốn sử dụng trình trượt so sánh với hình ảnh từ xa, chỉ cần thêm các dòng sau đây:

import ComparisonSlider from "react-native-comparison-slider";

<ComparisonSlider 
  initialPosition={50}
  leftImageURI="https://..."
  rightImageURI="https://..."
/>

Mã này sẽ sử dụng leftImageURI làm hình ảnh bên trái và rightImageURI làm hình ảnh bên phải. Trình trượt sẽ ở giữa hình ảnh (50). Kích thước mặc định cho trình trượt so sánh sẽ là kích thước hình ảnh từ xa. Bạn có thể bỏ qua kích thước bằng cách thêm hai thuộc tính: imageWidth và imageHeight.

Các thuộc tính

Giấy phép

Giấy phép MIT

Bản quyền (c) 2017 Charles-Olivier Demers
Cảm ơn bạn!
Quyền được cấp dưới đây, miễn phí, cho bất kỳ cá nhân nào nhận được bản sao của phần mềm này và các tệp tài liệu liên quan (gọi là “Phần mềm”), để sử dụng Phần mềm mà không bị hạn chế, bao gồm mà không giới hạn quyền sử dụng, sao chép, chỉnh sửa, kết hợp, xuất bản, phân phối, cấp phép và/hoặc bán bản sao của Phần mềm, và cho phép cá nhân mà Phần mềm được cung cấp cho họ làm như vậy, tuân thủ các điều kiện sau đây:

Thông báo bản quyền và thông báo quyền này phải được bao gồm trong tất cả các bản sao hoặc phần lớn của Phần mềm.

PHẦN MỀM ĐƯỢC CUNG CẤP “NHƯ VẬY”, KHÔNG BẢO HÀNH BẤT KỲ LOẠI NÀO, CÓ CÔNG BỐ HOẶC BẢO ĐẢM RÕ RÀNG, BAO GỒM NHƯNG KHÔNG GIỚI HẠN ĐỐI VỚI CÁC BẢO ĐẢM VỀ MERCHANTIBILITY, TÍNH DỤNG CHO MỤC ĐÍCH CỤ THỂ VÀ KHÔNG XÂM PHẠM. TRONG BẤT KỲ TRƯỜNG HỢP NÀO, TÁC GIẢ HOẶC CHỦ SỞ HỮU BẢN QUYỀN ĐỀU KHÔNG CHỊU TRÁCH NHIỆM CHO BẤT KỲ YÊU CẦU, THIỆT HẠI HOẶC TRÁCH NHIỆM KHÁC, CÓ XẢY RA, PHÁT SINH TỪ, LIÊN QUAN ĐẾN PHẦN MỀM HOẶC VIỆC SỬ DỤNG HOẶC CÁC THỎA THUẬN KHÁC LIÊN QUAN ĐẾN PHẦN MỀM.

Khác

Gói này sử dụng hai thư viện sau:

• https://github.com/jhampton/react-native-cropping.git từ 2jhampton
• https://github.com/jeanregisser/react-native-slider từ @jeanregisser

@bản quyền của hình ảnh được sử dụng trong bản demo:

• http://www.basketetsacados.com/top-10-des-plus-belles-plages-du-monde

Thông tin tải xuống:

Tác giả: codemers
Nguồn: https://github.com/codemers/react-native-comparison-slider

Giấy phép: MIT license