@react-native-pure/gallery

1.5.4 • Public • Published

gallery

A pure JavaScript image and video gallery component for react-native apps with common gestures like pan, pinch and doubleTap, supporting both iOS and Android. Support custom item.

Build Status npm version npm license npm download npm download

Install

$ npm i @react-native-pure/gallery --save

Documentaion

Quite easy to use:

import GalleryView from "@react-native-pure/gallery"
import {GalleryFileType} from '@react-native-pure/gallery/src/types'
class Galleray extends React.Component{

    data = [{
        url:'http://www.bz55.com/uploads/allimg/150122/139-150122145421.jpg',
        type:GalleryFileType.image
    }]
    render(){
        return (
             <GalleryViewer dataSource={this.data}/>
        );
    }
}

GalleryProps

  • dataSource Array<GalleryData>
  • style? any
  • initIndex? (Number* 初始显示第几张图
  • renderFooter? (index: Number) => React.ReactElement 自定义尾部
  • renderHeader? (index: Number) => React.ReactElement 自定义头部
  • renderItem? (data:GalleryData,index: Number) => React.ReactElement 内容页面渲染
  • renderIndicator? (data:GalleryData,index: Number) => React.ReactElement 是否显示加载动画
  • onChange? (index:number)=>void 当内容切换时触发
  • maxScale? Number最大缩放比例
  • minScale? (Number最小缩放比例
  • onPress? (index: Number) =>void单击
  • onDoubleClick? (index: Number) =>void 双击
  • enableDoubleClickZoom? Boolean是否支持双击,默认支持
  • onResponderGrant? ((event,gestureState)=>void 手势开始
  • onResponderMove? ((event,gestureState)=>void 手势移动
  • onResponderEnd? ((event,gestureState)=>void 手势结束

GalleryData

  • url String 图片/视频url地址
  • type ** $Values<typeof GalleryFileType>** 数据源类型
  • coverImageUrl String 视频封面图地址
  • disableZoom Boolean 禁用缩放,默认false

GalleryFileType

  • -1 other
  • 0 图片
  • 1 视频

Readme

Keywords

Package Sidebar

Install

npm i @react-native-pure/gallery

Weekly Downloads

0

Version

1.5.4

License

MIT

Unpacked Size

414 kB

Total Files

31

Last publish

Collaborators

  • kunkunbobo
  • m860