react-native-image-gallery

目录

• react-native-image-gallery
  • 目录
  • 安装
  • 使用示例
  • 远程和本地图片
  • 属性
  • 滚动状态与事件

本项目曾是 ldn0x7dc/react-native-gallery 的分支，但原仓库已不再维护，因此我们创建了自己的仓库。感谢 ldn0x7dc 的出色工作！👏👏👏

一个纯 JavaScript 实现的 React Native 图片画廊组件，支持平移、捏合和双击等常见手势，适用于 iOS 和 Android 平台。

该组件旨在成为 React Native 应用中最佳的图片查看器，相比其他类似画廊组件更为精致，它具备一些 iOS 相册应用中常见的实用功能，例如：

• 手势处理 - 除了常见的平移、捏合和双击手势外，该组件在缩放时针对焦点（也称为支点）的操作也十分流畅。
• 响应者切换 - 手势响应者的切换比其他任何组件都更加灵活，也就是说，可滚动容器与其包裹的图片子组件在获取和释放手势响应者方面表现出色。

此组件使用 @ldn0x7dc/react-native-view-pager 作为可滚动容器，并使用 react-native-transformable-image 作为被包裹的图片组件。

该组件适用于 react-native 0.28+ 版本。

您可以在 Archriss 的展示应用中实时体验此示例，该应用可在 Android 和 iOS 平台获取，或查看演示。

安装

npm install --save react-native-image-gallery 或 yarn add react-native-image-gallery

使用示例

import Gallery from 'react-native-image-gallery';

  render() {
    return (
      <Gallery
        style={{ flex: 1, backgroundColor: 'black' }}
        images={[
          { source: require('yourApp/image.png'), dimensions: { width: 150, height: 150 } },
          { source: { uri: 'http://i.imgur.com/XP2BE7q.jpg' } },
          { source: { uri: 'http://i.imgur.com/5nltiUd.jpg' } },
          { source: { uri: 'http://i.imgur.com/6vOahbP.jpg' } },
          { source: { uri: 'http://i.imgur.com/kj5VXtG.jpg' } }
        ]}
      />
    );
  }

远程和本地图片

该组件同时支持通过指定 source.uri 加载远程图片，以及将 source 设为 require() 返回结果的本地图片。

请注意，本地图片必须定义宽高，而远程图片则无需定义！ 不过，仍可为远程图片提供尺寸信息，这样图库就无需自行获取，从而可能提升性能。

属性

属性	描述	类型	默认值
images	图片数组	array	必需
initialPage	初始显示的图片	number	0
imageComponent	自定义渲染图片的函数，第一个参数是图片属性，第二个参数是其尺寸	function	<Image> 组件
errorComponent	自定义渲染无法显示的图片页面的函数	function	带样式化错误提示的 <View>
flatListProps	传递给底层 FlatList 的属性	object	{windowSize: 3}
pageMargin	图片之间显示的空白空间	number	0
onPageSelected	选中页面的索引变化时触发	function
onPageScrollStateChanged	页面滚动状态改变时调用，参见 滚动状态与事件	function
onPageScroll	滚动事件，参见 滚动状态与事件	function
scrollViewStyle	FlatList 组件的自定义样式	object	{}
onSingleTapConfirmed	单击确认后触发	function
onLongPress	长按后触发	function

滚动状态与事件

• onPageScroll : (event) => {}。

  事件对象包含以下数据：

  • position：当前可见的最左侧页面的索引。
  • offset：范围 [0,1) 内的值，描述页面过渡的阶段。
  • fraction：表示索引为 "position" 的页面可见部分占 (1 - x)，下一页可见部分占 x。

• onPageScrollStateChanged : (state) => {}。

  页面滚动状态改变时调用。页面滚动状态可分为 3 种：

  • 'idle'：当前没有与页面滚动器进行交互。
  • 'dragging'：当前正在与页面滚动器进行交互。
  • 'settling'：曾经与页面滚动器进行过交互，现在页面滚动器正在完成其关闭或打开动画。