UNPKG

react-native-imagebox

Version:

huhuge

68 lines (50 loc) 2.11 kB
# react-native-lightbox ## Installation ``` yarn add react-native-imagebox or npm install react-native-imagebox ``` ## Usage Save the image to the local ios rely on CameraRoll android at the same time rely on CameraRoll and react - native - fs ```js import ImageBox from "react-native-imagebox"; ​//数组中图片的个数决定弹出轮播图的的图片个数 let images = [ "http://otn4d80hz.bkt.clouddn.com/98210784.jpg", "http://otn4d80hz.bkt.clouddn.com/WechatIMG11.jpeg" ] // 用于 item 中图片的显示 <View style={styles.moreImage}> <ImageBox imageStyle = {{height:200,width:200}} underlayColor = "#fff" showIndex = {0} images = {images} imagesource = {images[0]}> </ImageBox> </View> ); moreImage:{ width:myUtil.size.width, flexDirection: 'row', flexWrap:'wrap' }, moreImageView:{ height:myUtil.size.width/3, width:myUtil.size.width/3 } ``` ## Properties | Prop | Type | Description | |---|---|---| |**`activeProps`**|`object`|Optional set of props applied to the content component when in lightbox mode. Usable for applying custom styles or higher resolution image source.| |**`renderHeader(close)`**|`function`|Custom header instead of default with X button| |**`renderContent`**|`function`|Custom lightbox content instead of default child content| |**`onClose`**|`function`|Triggered when lightbox is closed| |**`onOpen`**|`function`|Triggered when lightbox is opened| |**`underlayColor`**|`string`|Color of touchable background, defaults to `black`| |**`backgroundColor`**|`string`|Color of lightbox background, defaults to `black`| |**`swipeToDismiss`**|`bool`|Enables gestures to dismiss the fullscreen mode by swiping up or down, defaults to `true`.| |**`springConfig`**|`object`|[`Animated.spring`](https://facebook.github.io/react-native/docs/animations.html) configuration, defaults to `{ tension: 30, friction: 7 }`.| ## GifImage ![Image](http://otn4d80hz.bkt.clouddn.com/imagebox.gif)