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

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 configuration, defaults to { tension: 30, friction: 7 }.|

GifImage