react-native-imagebox
Version:
huhuge
68 lines (50 loc) • 2.11 kB
Markdown
# 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
