React-native-imagebox NPM

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 }`.