React Photo Gallery 项目教程

1. 项目介绍

React Photo Gallery 是一个响应式、可访问、可组合且可自定义的图片画廊组件。它能够保持图片的原始宽高比，创建类似马赛克或对齐的网格布局，支持行或列方向的布局，并提供了一个图片渲染器，用于实现诸如图片选择、收藏、标题等功能。此外，它还兼容服务端渲染（SSR）应用。

2. 项目快速启动

安装

首先，通过 npm 或 yarn 安装 react-photo-gallery：

yarn add react-photo-gallery

基本使用

以下是一个简单的示例，展示如何在你的 React 项目中使用 React Photo Gallery：

import React from 'react';
import Gallery from 'react-photo-gallery';

const photos = [
  {
    src: 'http://example.com/example/img1.jpg',
    width: 4,
    height: 3
  },
  {
    src: 'http://example.com/example/img2.jpg',
    width: 1,
    height: 1
  }
];

function App() {
  return (
    <div>
      <Gallery photos={photos} />
    </div>
  );
}

export default App;

运行项目

在项目根目录下运行以下命令启动项目：

yarn start

然后打开浏览器访问 localhost:8000，你将看到图片画廊的展示效果。

3. 应用案例和最佳实践

基本行布局

使用 React Photo Gallery 可以轻松创建基本的行布局。以下是一个示例：

<Gallery photos={photos} direction="row" />

基本列布局

你也可以创建列布局：

<Gallery photos={photos} direction="column" />

动态列布局

通过 columns 属性，你可以动态调整列的数量：

<Gallery photos={photos} columns={3} />

图片选择

你可以通过自定义 renderImage 函数来实现图片选择功能：

const renderImage = (props) => (
  <img
    {...props}
    onClick={() => console.log('Image clicked:', props.index)}
  />
);

<Gallery photos={photos} renderImage={renderImage} />

4. 典型生态项目

1. react-images

react-images 是一个轻量级的图片查看器组件，可以与 React Photo Gallery 结合使用，提供图片点击放大查看的功能。

2. react-sortable-hoc

react-sortable-hoc 是一个用于实现拖放排序的 React 高阶组件库，可以与 React Photo Gallery 结合，实现图片的拖放排序功能。

3. react-photo-album

react-photo-album 是一个专门用于创建相册的 React 组件库，可以与 React Photo Gallery 结合，提供更丰富的相册功能。

通过这些生态项目的结合，你可以进一步扩展 React Photo Gallery 的功能，满足更多复杂的图片展示需求。