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.
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
视频