Cách tạo thành phần xem trước ảnh trong React

Một thành phần xem hình ảnh (hộp đèn thư viện) trang nhã dành cho các ứng dụng React.

Cử chỉ toàn diện, kéo và xoay hiệu ứng vật lý trượt, vị trí chỉ định bằng hai ngón tay để phóng to và thu nhỏ. Tất cả các khía cạnh của kết nối hoạt hình, mở và đóng cạnh cảm ứng bật lại, tạo hiệu ứng tương tác tự nhiên. Hình ảnh có tính thích ứng, với kích thước hiển thị ban đầu phù hợp và điều chỉnh theo sự điều chỉnh.

Làm thế nào để sử dụng nó:

1. Cài đặt và nhập.

# NPM
$ npm i react-photo-viewimport { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

2. Thêm hình ảnh vào thành phần.

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="1.jpg">
        <img src="1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}

Xem trước:

Xem trên GitHub: https://github.com/MinJieLiu/react-photo-view