react-native-imagebox

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