react 使用react-viewer --save

react-viewer 是一个基于 React 的图片浏览器组件，可以在网页中实现图片的预览和放大缩小等功能。如果你想在自己的项目中使用 react-viewer，可以通过以下命令来安装：

npm install react-viewer --save

安装完成后，在需要使用的组件中引入即可，例如：

import ReactViewer from 'react-viewer';

<ReactViewer
  visible={this.state.visible}
  onClose={() => { this.setState({ visible: false }); }}
  images={[{ src: 'http://example.com/1.jpg', alt: '图片1' }, { src: 'http://example.com/2.jpg', alt: '图片2' }]}
/>

其中，`visible` 表示图片浏览器是否可见，`onClose` 是关闭图片浏览器的回调函数，`images` 是需要浏览的图片数组。具体的参数和用法可以查看 react-viewer 的文档。

相关问题

react-wx-images-viewer

react-wx-images-viewer是一个基于React.js编写的移动端图片浏览组件，可以在微信浏览器中使用。它支持双击放大、手势缩放、图片拖拽、旋转等功能，提供了良好的用户体验。

要使用react-wx-images-viewer，您需要先安装它，可以通过npm命令进行安装：

npm install react-wx-images-viewer --save

安装完成后，您需要在项目中引入该组件：

import ImagesViewer from 'react-wx-images-viewer';

然后就可以在代码中使用ImagesViewer组件了，例如：

<ImagesViewer
  images={[{src: 'url1', alt: 'image1'}, {src: 'url2', alt: 'image2'}]}
  currentIndex={0}
  onClose={() => console.log('close')}
/>

在上面的代码中，images属性指定了需要浏览的图片列表，currentIndex属性指定了当前需要展示的图片的索引，onClose属性是当组件关闭时触发的回调函数。

除了上述属性外，ImagesViewer还提供了许多其他属性和事件，您可以查看官方文档以获取更多信息。

react-pdf-viewer的中文文档

react-pdf-viewer是一个基于React的PDF阅读器组件库，由于其开源且易于使用的特点，被广泛应用于Web开发中。

以下是react-pdf-viewer的中文文档：

## 安装

使用npm安装：

npm install @react-pdf-viewer/core --save

或者使用yarn安装：

yarn add @react-pdf-viewer/core

## 使用

import React from 'react';
import { Viewer } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const App = () => (
    <Viewer fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf" />
);

export default App;

## API

### Viewer

PDF阅读器组件，提供一系列的props来控制阅读器的行为。

#### 属性

* `fileUrl: string`：必须的属性。PDF文件的URL。
* `defaultScale?: number | string`：PDF文件的默认缩放比例。可以是数字，也可以是字符串，例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。
* `initialPage?: number`：PDF文件的初始页数。默认值为1。
* `onDocumentLoad?(pdfDocument: PdfDocument) => void`：当PDF文件加载完成时调用的回调函数。
* `onPageChange?(page: number) => void`：当页码发生改变时调用的回调函数。
* `renderError?(error: Error) => React.ReactElement`：当加载PDF文件出错时的自定义渲染函数。
* `renderLoader?() => React.ReactElement`：当加载PDF文件时的自定义渲染函数。
* `theme?: ThemeContext`：阅读器的主题。默认为`defaultTheme`。

### defaultLayoutPlugin

默认的布局插件，提供一系列的props来控制布局。

#### 属性

* `defaultScale?: number | string`：PDF文件的默认缩放比例。可以是数字，也可以是字符串，例如“auto”、“page-width”、“page-fit”、“50%”等。默认值为“auto”。
* `sidebarTabs?: Array<SidebarTab>`：侧边栏选项卡列表。默认为`[bookmarksTab, attachmentsTab]`。
* `sidebarWidth?: number`：侧边栏的宽度。默认为`280`。
* `thumbnailContainer?: (props: ThumbnailContainerProps) => React.ReactElement`：自定义缩略图容器组件。
* `topToolbar?: (props: ToolbarProps) => React.ReactElement`：自定义顶部工具栏组件。
* `zoom?(scale: number) => void`：缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时，需要将此函数作为props传递给自定义组件。

### defaultToolbarPlugin

默认的工具栏插件，提供一系列的props来控制工具栏。

#### 属性

* `numberOfPages?: number`：PDF文件的总页数。当PDF文件加载完成后，将自动更新此属性。
* `page?: number`：PDF文件的当前页码。当页码发生改变时，将自动更新此属性。
* `zoom?(scale: number) => void`：缩放PDF文件的函数。当需要在自定义组件中调用缩放功能时，需要将此函数作为props传递给自定义组件。

### defaultTheme

默认的主题。

#### 属性

* `background?: string`：阅读器的背景色。默认为`#fff`。
* `color?: string`：阅读器的前景色。默认为`#000`。
* `primaryColor?: string`：阅读器的主色调。默认为`#4caf50`。
* `secondaryColor?: string`：阅读器的次色调。默认为`#2196f3`。

## 示例

以下是一个包含自定义缩略图容器和工具栏的示例：

import React, { useState } from 'react';
import { Viewer, defaultLayoutPlugin, defaultToolbarPlugin, ThumbnailList, Toolbar } from '@react-pdf-viewer/core';
import '@react-pdf-viewer/core/lib/styles/index.css';

const App = () => {
    const [numPages, setNumPages] = useState(0);
    const [currentPage, setCurrentPage] = useState(0);

    const handleDocumentLoadSuccess = ({ numPages }) => {
        setNumPages(numPages);
    };

    const handlePageChange = (page) => {
        setCurrentPage(page);
    };

    const handleZoom = (scale) => {
        console.log(`Zoom to ${scale}`);
    };

    const thumbnailContainer = (props) => (
        <div style={{ padding: '16px 0' }}>
            <ThumbnailList {...props} />
        </div>
    );

    const topToolbar = (props) => (
        <div style={{ padding: '16px 0' }}>
            <Toolbar {...props} pageIndex={currentPage} numberOfPages={numPages} zoom={handleZoom} />
        </div>
    );

    return (
        <div style={{ display: 'flex', flexDirection: 'row', height: '100vh' }}>
            <Viewer
                fileUrl="https://arxiv.org/pdf/quant-ph/0410100.pdf"
                plugins={[
                    defaultLayoutPlugin({
                        thumbnailContainer,
                    }),
                    defaultToolbarPlugin({
                        topToolbar,
                    }),
                ]}
                onDocumentLoadSuccess={handleDocumentLoadSuccess}
                onPageChange={handlePageChange}
            />
        </div>
    );
};

export default App;

## 参考

* [react-pdf-viewer官方文档](https://react-pdf-viewer.dev/)