New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-native-image-zoom-viewer

Package Overview
Dependencies
Maintainers
1
Versions
109
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-image-zoom-viewer - npm Package Compare versions

Comparing version

2.0.17
to
2.0.18

yarn-error.log

438

built/image-viewer.component.js

@@ -54,2 +54,147 @@ "use strict";

_this.loadedIndex = new Map();
_this.handleLongPressWithIndex = new Map();
/**
* 触发溢出水平滚动
*/
_this.handleHorizontalOuterRangeOffset = function (offsetX) {
_this.positionXNumber = _this.standardPositionX + offsetX;
_this.positionX.setValue(_this.positionXNumber);
if (offsetX < 0) {
if (_this.state.currentShowIndex ||
0 < _this.props.imageUrls.length - 1) {
_this.loadImage((_this.state.currentShowIndex || 0) + 1);
}
}
else if (offsetX > 0) {
if (_this.state.currentShowIndex || 0 > 0) {
_this.loadImage((_this.state.currentShowIndex || 0) - 1);
}
}
};
/**
* 手势结束，但是没有取消浏览大图
*/
_this.handleResponderRelease = function (vx) {
if (vx > 0.7) {
// 上一张
_this.goBack.call(_this);
// 这里可能没有触发溢出滚动，为了防止图片不被加载，调用加载图片
if (_this.state.currentShowIndex || 0 > 0) {
_this.loadImage((_this.state.currentShowIndex || 0) - 1);
}
}
else if (vx < -0.7) {
// 下一张
_this.goNext.call(_this);
if (_this.state.currentShowIndex || 0 < _this.props.imageUrls.length - 1) {
_this.loadImage((_this.state.currentShowIndex || 0) + 1);
}
}
if (_this.positionXNumber - _this.standardPositionX >
(_this.props.flipThreshold || 0)) {
// 上一张
_this.goBack.call(_this);
}
else if (_this.positionXNumber - _this.standardPositionX <
-(_this.props.flipThreshold || 0)) {
// 下一张
_this.goNext.call(_this);
}
else {
// 回到之前的位置
_this.resetPosition.call(_this);
}
};
/**
* 到上一张
*/
_this.goBack = function () {
if (_this.state.currentShowIndex === 0) {
// 回到之前的位置
_this.resetPosition.call(_this);
return;
}
_this.positionXNumber = _this.standardPositionX + _this.width;
_this.standardPositionX = _this.positionXNumber;
react_native_1.Animated.timing(_this.positionX, {
toValue: _this.positionXNumber,
duration: 100
}).start();
var nextIndex = (_this.state.currentShowIndex || 0) - 1;
_this.setState({
currentShowIndex: nextIndex
}, function () {
if (_this.props.onChange) {
_this.props.onChange(_this.state.currentShowIndex);
}
});
};
/**
* 长按
*/
_this.handleLongPress = function (image) {
if (_this.props.saveToLocalByLongPress) {
// 出现保存到本地的操作框
_this.setState({ isShowMenu: true });
}
if (_this.props.onLongPress) {
_this.props.onLongPress(image);
}
};
/**
* 单击
*/
_this.handleClick = function () {
if (_this.props.onClick) {
_this.props.onClick(_this.handleCancel);
}
};
/**
* 双击
*/
_this.handleDoubleClick = function () {
if (_this.props.onDoubleClick) {
_this.props.onDoubleClick(_this.handleCancel);
}
};
/**
* 退出
*/
_this.handleCancel = function () {
_this.hasLayout = false;
if (_this.props.onCancel) {
_this.props.onCancel();
}
};
/**
* 完成布局
*/
_this.handleLayout = function (event) {
if (_this.hasLayout) {
return;
}
_this.hasLayout = true;
_this.width = event.nativeEvent.layout.width;
_this.height = event.nativeEvent.layout.height;
_this.styles = image_viewer_style_1.default(_this.width, _this.height, _this.props.backgroundColor || "transparent");
// 强制刷新
_this.forceUpdate();
_this.jumpToCurrentImage();
};
/**
* 保存当前图片到本地相册
*/
_this.saveToLocal = function () {
if (!_this.props.onSave) {
react_native_1.CameraRoll.saveToCameraRoll(_this.props.imageUrls[_this.state.currentShowIndex || 0].url);
_this.props.onSaveToCamera(_this.state.currentShowIndex);
}
else {
_this.props.onSave(_this.props.imageUrls[_this.state.currentShowIndex || 0].url);
}
_this.setState({ isShowMenu: false });
};
_this.handleLeaveMenu = function () {
_this.setState({ isShowMenu: false });
};
return _this;

@@ -136,3 +281,4 @@ }

// 如果已经 success 了，就不做处理
if (_this.state.imageSizes[index] && _this.state.imageSizes[index].status !== "loading") {
if (_this.state.imageSizes[index] &&
_this.state.imageSizes[index].status !== "loading") {
return;

@@ -142,5 +288,3 @@ }

imageSizes[index] = imageStatus;
_this.setState({
imageSizes: imageSizes
});
_this.setState({ imageSizes: imageSizes });
};

@@ -152,3 +296,4 @@ if (this.state.imageSizes[index].status === "success") {

// 如果已经有宽高了，直接设置为 success
if (this.state.imageSizes[index].width > 0 && this.state.imageSizes[index].height > 0) {
if (this.state.imageSizes[index].width > 0 &&
this.state.imageSizes[index].height > 0) {
imageStatus.status = "success";

@@ -183,5 +328,7 @@ saveImageSize();

imageLoaded = true;
prefetchImagePromise.then(function () {
prefetchImagePromise
.then(function () {
//
}).catch(function () {
})
.catch(function () {
//

@@ -237,76 +384,2 @@ });

/**
* 触发溢出水平滚动
*/
ImageViewer.prototype.handleHorizontalOuterRangeOffset = function (offsetX) {
this.positionXNumber = this.standardPositionX + offsetX;
this.positionX.setValue(this.positionXNumber);
if (offsetX < 0) {
if (this.state.currentShowIndex || 0 < this.props.imageUrls.length - 1) {
this.loadImage((this.state.currentShowIndex || 0) + 1);
}
}
else if (offsetX > 0) {
if (this.state.currentShowIndex || 0 > 0) {
this.loadImage((this.state.currentShowIndex || 0) - 1);
}
}
};
/**
* 手势结束，但是没有取消浏览大图
*/
ImageViewer.prototype.handleResponderRelease = function (vx) {
if (vx > 0.7) {
// 上一张
this.goBack.call(this);
// 这里可能没有触发溢出滚动，为了防止图片不被加载，调用加载图片
if (this.state.currentShowIndex || 0 > 0) {
this.loadImage((this.state.currentShowIndex || 0) - 1);
}
}
else if (vx < -0.7) {
// 下一张
this.goNext.call(this);
if (this.state.currentShowIndex || 0 < this.props.imageUrls.length - 1) {
this.loadImage((this.state.currentShowIndex || 0) + 1);
}
}
if (this.positionXNumber - this.standardPositionX > (this.props.flipThreshold || 0)) {
// 上一张
this.goBack.call(this);
}
else if (this.positionXNumber - this.standardPositionX < -(this.props.flipThreshold || 0)) {
// 下一张
this.goNext.call(this);
}
else {
// 回到之前的位置
this.resetPosition.call(this);
}
};
/**
* 到上一张
*/
ImageViewer.prototype.goBack = function () {
var _this = this;
if (this.state.currentShowIndex === 0) {
// 回到之前的位置
this.resetPosition.call(this);
return;
}
this.positionXNumber = this.standardPositionX + this.width;
this.standardPositionX = this.positionXNumber;
react_native_1.Animated.timing(this.positionX, {
toValue: this.positionXNumber,
duration: 100,
}).start();
var nextIndex = (this.state.currentShowIndex || 0) - 1;
this.setState({
currentShowIndex: nextIndex
}, function () {
if (_this.props.onChange) {
_this.props.onChange(_this.state.currentShowIndex);
}
});
};
/**
* 到下一张

@@ -325,3 +398,3 @@ */

toValue: this.positionXNumber,
duration: 100,
duration: 100
}).start();

@@ -344,60 +417,6 @@ var nextIndex = (this.state.currentShowIndex || 0) + 1;

toValue: this.standardPositionX,
duration: 150,
duration: 150
}).start();
};
/**
* 长按
*/
ImageViewer.prototype.handleLongPress = function (image) {
if (this.props.saveToLocalByLongPress) {
// 出现保存到本地的操作框
this.setState({
isShowMenu: true
});
}
if (this.props.onLongPress) {
this.props.onLongPress(image);
}
};
/**
* 单击
*/
ImageViewer.prototype.handleClick = function () {
if (this.props.onClick) {
this.props.onClick(this.handleCancel.bind(this));
}
};
/**
* 双击
*/
ImageViewer.prototype.handleDoubleClick = function () {
if (this.props.onDoubleClick) {
this.props.onDoubleClick(this.handleCancel.bind(this));
}
};
/**
* 退出
*/
ImageViewer.prototype.handleCancel = function () {
this.hasLayout = false;
if (this.props.onCancel) {
this.props.onCancel();
}
};
/**
* 完成布局
*/
ImageViewer.prototype.handleLayout = function (event) {
if (this.hasLayout) {
return;
}
this.hasLayout = true;
this.width = event.nativeEvent.layout.width;
this.height = event.nativeEvent.layout.height;
this.styles = image_viewer_style_1.default(this.width, this.height, this.props.backgroundColor || "transparent");
// 强制刷新
this.forceUpdate();
this.jumpToCurrentImage();
};
/**
* 获得整体内容

@@ -411,2 +430,5 @@ */

var ImageElements = this.props.imageUrls.map(function (image, index) {
if (!_this.handleLongPressWithIndex.has(index)) {
_this.handleLongPressWithIndex.set(index, _this.handleLongPress.bind(_this, image));
}
var width = _this.state.imageSizes[index] && _this.state.imageSizes[index].width;

@@ -429,5 +451,5 @@ var height = _this.state.imageSizes[index] && _this.state.imageSizes[index].height;

var children = _a.children, others = __rest(_a, ["children"]);
return (<react_native_image_pan_zoom_1.default key={index} cropWidth={_this.width} cropHeight={_this.height} maxOverflow={_this.props.maxOverflow} horizontalOuterRangeOffset={_this.handleHorizontalOuterRangeOffset.bind(_this)} responderRelease={_this.handleResponderRelease.bind(_this)} onLongPress={_this.handleLongPress.bind(_this, image)} onClick={_this.handleClick.bind(_this)} onDoubleClick={_this.handleDoubleClick.bind(_this)} {...others}>
{children}
</react_native_image_pan_zoom_1.default>);
return (<react_native_image_pan_zoom_1.default key={index} cropWidth={_this.width} cropHeight={_this.height} maxOverflow={_this.props.maxOverflow} horizontalOuterRangeOffset={_this.handleHorizontalOuterRangeOffset} responderRelease={_this.handleResponderRelease} onLongPress={_this.handleLongPressWithIndex.get(index)} onClick={_this.handleClick} onDoubleClick={_this.handleDoubleClick} {...others}>
{children}
</react_native_image_pan_zoom_1.default>);
};

@@ -437,69 +459,58 @@ switch (imageInfo.status) {

return (<Wrapper key={index} style={__assign({}, _this.styles.modalContainer, _this.styles.loadingContainer)} imageWidth={screenWidth} imageHeight={screenHeight}>
<react_native_1.View style={_this.styles.loadingContainer}>
{_this.props.loadingRender()}
</react_native_1.View>
</Wrapper>);
<react_native_1.View style={_this.styles.loadingContainer}>
{_this.props.loadingRender()}
</react_native_1.View>
</Wrapper>);
case "success":
return (<Wrapper key={index} imageWidth={width} imageHeight={height}>
<react_native_1.Image style={__assign({}, _this.styles.imageStyle, { width: width, height: height })} source={{ uri: image.url }}/>
</Wrapper>);
<react_native_1.Image style={__assign({}, _this.styles.imageStyle, { width: width,
height: height })} source={{ uri: image.url }}/>
</Wrapper>);
case "fail":
return (<Wrapper key={index} style={_this.styles.modalContainer} imageWidth={_this.props.failImageSource ? _this.props.failImageSource.width : screenWidth} imageHeight={_this.props.failImageSource ? _this.props.failImageSource.height : screenHeight}>
{_this.props.failImageSource &&
<react_native_1.Image source={{ uri: _this.props.failImageSource.url }} style={{ width: _this.props.failImageSource.width, height: _this.props.failImageSource.height }}/>}
</Wrapper>);
return (<Wrapper key={index} style={_this.styles.modalContainer} imageWidth={_this.props.failImageSource
? _this.props.failImageSource.width
: screenWidth} imageHeight={_this.props.failImageSource
? _this.props.failImageSource.height
: screenHeight}>
{_this.props.failImageSource && (<react_native_1.Image source={{
uri: _this.props.failImageSource.url
}} style={{
width: _this.props.failImageSource.width,
height: _this.props.failImageSource.height
}}/>)}
</Wrapper>);
}
});
return (<react_native_1.Animated.View style={__assign({}, this.styles.container, { opacity: this.fadeAnim })}>
{this.props.renderHeader(this.state.currentShowIndex)}
{this.props.renderHeader(this.state.currentShowIndex)}
<react_native_1.View style={this.styles.arrowLeftContainer}>
<react_native_1.TouchableWithoutFeedback onPress={this.goBack.bind(this)}>
<react_native_1.View>
{this.props.renderArrowLeft()}
</react_native_1.View>
</react_native_1.TouchableWithoutFeedback>
</react_native_1.View>
<react_native_1.View style={this.styles.arrowLeftContainer}>
<react_native_1.TouchableWithoutFeedback onPress={this.goBack}>
<react_native_1.View>{this.props.renderArrowLeft()}</react_native_1.View>
</react_native_1.TouchableWithoutFeedback>
</react_native_1.View>
<react_native_1.View style={this.styles.arrowRightContainer}>
<react_native_1.TouchableWithoutFeedback onPress={this.goNext.bind(this)}>
<react_native_1.View>
{this.props.renderArrowRight()}
</react_native_1.View>
</react_native_1.TouchableWithoutFeedback>
</react_native_1.View>
<react_native_1.View style={this.styles.arrowRightContainer}>
<react_native_1.TouchableWithoutFeedback onPress={this.goNext}>
<react_native_1.View>{this.props.renderArrowRight()}</react_native_1.View>
</react_native_1.TouchableWithoutFeedback>
</react_native_1.View>
<react_native_1.Animated.View style={__assign({}, this.styles.moveBox, { transform: [{ translateX: this.positionX }], width: this.width * this.props.imageUrls.length })}>
{ImageElements}
</react_native_1.Animated.View>
<react_native_1.Animated.View style={__assign({}, this.styles.moveBox, { transform: [{ translateX: this.positionX }], width: this.width * this.props.imageUrls.length })}>
{ImageElements}
</react_native_1.Animated.View>
{this.props.imageUrls.length > 1 &&
{this.props.imageUrls.length > 1 &&
this.props.renderIndicator((this.state.currentShowIndex || 0) + 1, this.props.imageUrls.length)}
{this.props.imageUrls[this.state.currentShowIndex || 0].originSizeKb &&
this.props.imageUrls[this.state.currentShowIndex || 0].originUrl &&
<react_native_1.View style={this.styles.watchOrigin}>
<react_native_1.TouchableOpacity style={this.styles.watchOriginTouchable}>
<react_native_1.Text style={this.styles.watchOriginText}>查看原图(2M)</react_native_1.Text>
</react_native_1.TouchableOpacity>
</react_native_1.View>}
{this.props.imageUrls[this.state.currentShowIndex || 0].originSizeKb &&
this.props.imageUrls[this.state.currentShowIndex || 0].originUrl && (<react_native_1.View style={this.styles.watchOrigin}>
<react_native_1.TouchableOpacity style={this.styles.watchOriginTouchable}>
<react_native_1.Text style={this.styles.watchOriginText}>查看原图(2M)</react_native_1.Text>
</react_native_1.TouchableOpacity>
</react_native_1.View>)}
{this.props.renderFooter(this.state.currentShowIndex)}
</react_native_1.Animated.View>);
{this.props.renderFooter(this.state.currentShowIndex)}
</react_native_1.Animated.View>);
};
/**
* 保存当前图片到本地相册
*/
ImageViewer.prototype.saveToLocal = function () {
if (!this.props.onSave) {
react_native_1.CameraRoll.saveToCameraRoll(this.props.imageUrls[this.state.currentShowIndex || 0].url);
this.props.onSaveToCamera(this.state.currentShowIndex);
}
else {
this.props.onSave(this.props.imageUrls[this.state.currentShowIndex || 0].url);
}
this.setState({
isShowMenu: false
});
};
ImageViewer.prototype.getMenu = function () {

@@ -510,27 +521,26 @@ if (!this.state.isShowMenu) {

return (<react_native_1.View style={this.styles.menuContainer}>
<react_native_1.View style={this.styles.menuShadow}/>
<react_native_1.View style={this.styles.menuContent}>
<react_native_1.TouchableHighlight underlayColor="#F2F2F2" onPress={this.saveToLocal.bind(this)} style={this.styles.operateContainer}>
<react_native_1.Text style={this.styles.operateText}>{this.props.menuContext.saveToLocal}</react_native_1.Text>
</react_native_1.TouchableHighlight>
<react_native_1.TouchableHighlight underlayColor="#F2F2F2" onPress={this.handleLeaveMenu.bind(this)} style={this.styles.operateContainer}>
<react_native_1.Text style={this.styles.operateText}>{this.props.menuContext.cancel}</react_native_1.Text>
</react_native_1.TouchableHighlight>
</react_native_1.View>
</react_native_1.View>);
<react_native_1.View style={this.styles.menuShadow}/>
<react_native_1.View style={this.styles.menuContent}>
<react_native_1.TouchableHighlight underlayColor="#F2F2F2" onPress={this.saveToLocal} style={this.styles.operateContainer}>
<react_native_1.Text style={this.styles.operateText}>
{this.props.menuContext.saveToLocal}
</react_native_1.Text>
</react_native_1.TouchableHighlight>
<react_native_1.TouchableHighlight underlayColor="#F2F2F2" onPress={this.handleLeaveMenu} style={this.styles.operateContainer}>
<react_native_1.Text style={this.styles.operateText}>
{this.props.menuContext.cancel}
</react_native_1.Text>
</react_native_1.TouchableHighlight>
</react_native_1.View>
</react_native_1.View>);
};
ImageViewer.prototype.handleLeaveMenu = function () {
this.setState({
isShowMenu: false
});
};
ImageViewer.prototype.render = function () {
var childs = null;
childs = (<react_native_1.View>
{this.getContent()}
{this.getMenu()}
</react_native_1.View>);
return (<react_native_1.View onLayout={this.handleLayout.bind(this)} style={__assign({ flex: 1, overflow: "hidden" }, this.props.style)}>
{childs}
</react_native_1.View>);
{this.getContent()}
{this.getMenu()}
</react_native_1.View>);
return (<react_native_1.View onLayout={this.handleLayout} style={__assign({ flex: 1, overflow: "hidden" }, this.props.style)}>
{childs}
</react_native_1.View>);
};

@@ -537,0 +547,0 @@ ImageViewer.defaultProps = new image_viewer_type_1.Props();

5

built/image-viewer.style.js

@@ -82,3 +82,3 @@ "use strict";

justifyContent: "center",
alignItems: "center",
alignItems: "center"
},

@@ -117,3 +117,4 @@ arrowLeftContainer: {

textShadowOffset: {
width: 0, height: 0.5
width: 0,
height: 0.5
},

@@ -120,0 +121,0 @@ textShadowRadius: 0

10

package.json
{
"name": "react-native-image-zoom-viewer",
"version": "2.0.17",
"version": "2.0.18",
"description": "react native image viewer,大图浏览",

@@ -15,5 +15,3 @@ "main": "built/index.js",

},
"keywords": [
"image-viewer"
],
"keywords": ["image-viewer"],
"author": "ascoders",

@@ -23,3 +21,3 @@ "license": "MIT",

"nt-transmit-transparently": "^1.0.7",
"react-native-image-pan-zoom": "^2.0.13"
"react-native-image-pan-zoom": "^2.0.16"
},

@@ -39,2 +37,2 @@ "peerDependencies": {

}
}
}

8

readme.md

@@ -21,3 +21,3 @@ ## Show Cases

- Install create-react-native-app first
* Install create-react-native-app first

@@ -28,3 +28,3 @@ ```bash

- Initialization of a react-native project
* Initialization of a react-native project

@@ -35,3 +35,3 @@ ```bash

- Then, edit `AwesomeProject/App.js`, like this:
* Then, edit `AwesomeProject/App.js`, like this:

@@ -84,3 +84,3 @@ ```typescript

Then, scan the QR, use your [expo app](https://expo.io./).
Then, scan the QR, use your [expo app](https://expo.io./).

@@ -87,0 +87,0 @@ ### Dependence

239

src/image-viewer.style.ts
import { ImageStyle, TextStyle, ViewStyle } from "react-native"
export default (width: number, height: number, backgroundColor: string): {
[x: string]: ViewStyle | TextStyle
export default (
width: number,
height: number,
backgroundColor: string
): {
[x: string]: ViewStyle | TextStyle
} => {
return {
modalContainer: {
backgroundColor,
justifyContent: "center",
alignItems: "center",
overflow: "hidden"
},
watchOrigin: {
position: "absolute",
width,
bottom: 20,
justifyContent: "center",
alignItems: "center"
},
watchOriginTouchable: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 5,
paddingBottom: 5,
borderRadius: 30,
borderColor: "white",
borderWidth: 0.5,
backgroundColor: "rgba(0, 0, 0, 0.1)"
},
watchOriginText: {
color: "white",
backgroundColor: "transparent"
},
imageStyle: {},
container: {
backgroundColor
},
// 多图浏览需要调整整体位置的盒子
moveBox: {
flexDirection: "row",
alignItems: "center"
},
menuContainer: {
position: "absolute",
width,
height,
left: 0,
bottom: 0
},
menuShadow: {
position: "absolute",
width,
height,
backgroundColor: "black",
left: 0,
bottom: 0,
opacity: 0.2,
zIndex: 10
},
menuContent: {
position: "absolute",
width,
left: 0,
bottom: 0,
zIndex: 11
},
operateContainer: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
height: 40,
borderBottomColor: "#ccc",
borderBottomWidth: 1
},
operateText: {
color: "#333"
},
loadingTouchable: {
width,
height
},
loadingContainer: {
justifyContent: "center",
alignItems: "center",
},
arrowLeftContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
justifyContent: "center"
},
arrowRightContainer: {
position: "absolute",
top: 0,
bottom: 0,
right: 0,
justifyContent: "center"
}
return {
modalContainer: {
backgroundColor,
justifyContent: "center",
alignItems: "center",
overflow: "hidden"
},
watchOrigin: {
position: "absolute",
width,
bottom: 20,
justifyContent: "center",
alignItems: "center"
},
watchOriginTouchable: {
paddingLeft: 10,
paddingRight: 10,
paddingTop: 5,
paddingBottom: 5,
borderRadius: 30,
borderColor: "white",
borderWidth: 0.5,
backgroundColor: "rgba(0, 0, 0, 0.1)"
},
watchOriginText: {
color: "white",
backgroundColor: "transparent"
},
imageStyle: {},
container: {
backgroundColor
},
// 多图浏览需要调整整体位置的盒子
moveBox: {
flexDirection: "row",
alignItems: "center"
},
menuContainer: {
position: "absolute",
width,
height,
left: 0,
bottom: 0
},
menuShadow: {
position: "absolute",
width,
height,
backgroundColor: "black",
left: 0,
bottom: 0,
opacity: 0.2,
zIndex: 10
},
menuContent: {
position: "absolute",
width,
left: 0,
bottom: 0,
zIndex: 11
},
operateContainer: {
justifyContent: "center",
alignItems: "center",
backgroundColor: "white",
height: 40,
borderBottomColor: "#ccc",
borderBottomWidth: 1
},
operateText: {
color: "#333"
},
loadingTouchable: {
width,
height
},
loadingContainer: {
justifyContent: "center",
alignItems: "center"
},
arrowLeftContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: 0,
justifyContent: "center"
},
arrowRightContainer: {
position: "absolute",
top: 0,
bottom: 0,
right: 0,
justifyContent: "center"
}
}
}
export const simpleStyle: {
[x: string]: ViewStyle | TextStyle
[x: string]: ViewStyle | TextStyle
} = {
count: {
position: "absolute",
left: 0,
right: 0,
top: 38,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent"
},
countText: {
color: "white",
fontSize: 16,
backgroundColor: "transparent",
textShadowColor: "rgba(0, 0, 0, 0.3)",
textShadowOffset: {
width: 0, height: 0.5
},
textShadowRadius: 0
}
}
count: {
position: "absolute",
left: 0,
right: 0,
top: 38,
justifyContent: "center",
alignItems: "center",
backgroundColor: "transparent"
},
countText: {
color: "white",
fontSize: 16,
backgroundColor: "transparent",
textShadowColor: "rgba(0, 0, 0, 0.3)",
textShadowOffset: {
width: 0,
height: 0.5
},
textShadowRadius: 0
}
}

365

src/image-viewer.type.ts

@@ -6,217 +6,224 @@ import * as React from "react"

export class Props {
/**
* 是否显示
*/
public show?: boolean = false
/**
* 是否显示
*/
public show?: boolean = false
/**
* 图片数组
*/
public imageUrls: IImageInfo[] = []
/**
* 图片数组
*/
public imageUrls: IImageInfo[] = []
/**
* 滑动到下一页的X阈值
*/
public flipThreshold?: number = 80
/**
* 滑动到下一页的X阈值
*/
public flipThreshold?: number = 80
/**
* 当前页能滑到下一页X位置最大值
*/
public maxOverflow?: number = 300
/**
* 当前页能滑到下一页X位置最大值
*/
public maxOverflow?: number = 300
/**
* 初始显示第几张图
*/
public index?: number = 0
/**
* 初始显示第几张图
*/
public index?: number = 0
/**
* 加载失败的图
*/
public failImageSource?: IImageInfo = undefined
/**
* 加载失败的图
*/
public failImageSource?: IImageInfo = undefined
/**
* 背景颜色
*/
public backgroundColor?: string = "black"
/**
* 背景颜色
*/
public backgroundColor?: string = "black"
/**
* Menu Context Values
*/
public menuContext?: any = {
saveToLocal: "save to the album",
cancel: "cancel"
}
/**
* Menu Context Values
*/
public menuContext?: any = {
saveToLocal: "save to the album",
cancel: "cancel"
}
/**
* 是否开启长按保存到本地的功能
*/
public saveToLocalByLongPress?: boolean = true
/**
* 是否开启长按保存到本地的功能
*/
public saveToLocalByLongPress?: boolean = true
public style?: ViewStyle = {}
public style?: ViewStyle = {}
/**
* 长按图片的回调
*/
public onLongPress?: (image?: IImageInfo) => void = () => {
//
}
/**
* 长按图片的回调
*/
public onLongPress?: (image?: IImageInfo) => void = () => {
//
}
/**
* 单击回调
*/
public onClick?: (close?: () => any) => void = () => {
//
}
/**
* 单击回调
*/
public onClick?: (close?: () => any) => void = () => {
//
}
/**
* 双击回调
*/
public onDoubleClick?: (close?: () => any) => void = () => {
//
}
/**
* 双击回调
*/
public onDoubleClick?: (close?: () => any) => void = () => {
//
}
/**
* 图片保存到本地方法，如果写了这个方法，就不会调取系统默认方法
* 针对安卓不支持 saveToCameraRoll 远程图片，可以在安卓调用此回调，调用安卓原生接口
*/
public onSave?: (url: string) => void = () => {
//
}
/**
* 图片保存到本地方法，如果写了这个方法，就不会调取系统默认方法
* 针对安卓不支持 saveToCameraRoll 远程图片，可以在安卓调用此回调，调用安卓原生接口
*/
public onSave?: (url: string) => void = () => {
//
}
/**
* 自定义头部
*/
public renderHeader?: (currentIndex?: number) => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义头部
*/
public renderHeader?: (
currentIndex?: number
) => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义尾部
*/
public renderFooter?: (currentIndex?: number) => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义尾部
*/
public renderFooter?: (
currentIndex?: number
) => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义计时器
*/
public renderIndicator?: (currentIndex?: number, allSize?: number) => React.ReactElement<any> = (currentIndex: number, allSize: number) => {
return React.createElement(
View,
{ style: simpleStyle.count },
React.createElement(
Text,
{ style: simpleStyle.countText },
currentIndex + "/" + allSize
)
)
}
/**
* 自定义计时器
*/
public renderIndicator?: (
currentIndex?: number,
allSize?: number
) => React.ReactElement<any> = (currentIndex: number, allSize: number) => {
return React.createElement(
View,
{ style: simpleStyle.count },
React.createElement(
Text,
{ style: simpleStyle.countText },
currentIndex + "/" + allSize
)
)
}
/**
* 自定义左翻页按钮
*/
public renderArrowLeft?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义左翻页按钮
*/
public renderArrowLeft?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义右翻页按钮
*/
public renderArrowRight?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 自定义右翻页按钮
*/
public renderArrowRight?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 弹出大图的回调
*/
public onShowModal?: (content?: any) => void = () => {
//
}
/**
* 弹出大图的回调
*/
public onShowModal?: (content?: any) => void = () => {
//
}
/**
* 取消看图的回调
*/
public onCancel?: () => void = () => {
//
}
/**
* 取消看图的回调
*/
public onCancel?: () => void = () => {
//
}
/**
* 渲染loading元素
*/
public loadingRender?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 渲染loading元素
*/
public loadingRender?: () => React.ReactElement<any> = () => {
return null as any
}
/**
* 保存到相册的回调
*/
public onSaveToCamera?: (index?: number) => void = () => {
//
}
/**
* 保存到相册的回调
*/
public onSaveToCamera?: (index?: number) => void = () => {
//
}
/**
* 当图片切换时触发
*/
public onChange?: (index?: number) => void = () => {
//
}
/**
* 当图片切换时触发
*/
public onChange?: (index?: number) => void = () => {
//
}
}
export class State {
/**
* 是否显示
*/
public show?: boolean = false
/**
* 是否显示
*/
public show?: boolean = false
/**
* 当前显示第几个
*/
public currentShowIndex?: number = 0
/**
* 当前显示第几个
*/
public currentShowIndex?: number = 0
/**
* 图片拉取是否完毕了
*/
public imageLoaded?: boolean = false
/**
* 图片拉取是否完毕了
*/
public imageLoaded?: boolean = false
/**
* 图片长宽列表
*/
public imageSizes?: IImageSize[] = []
/**
* 图片长宽列表
*/
public imageSizes?: IImageSize[] = []
/**
* 是否出现功能菜单
*/
public isShowMenu?: boolean = false
/**
* 是否出现功能菜单
*/
public isShowMenu?: boolean = false
}
export interface IImageInfo {
url: string
/**
* 没有的话会自动拉取
*/
width?: number
/**
* 没有的话会自动拉取
*/
height?: number
/**
* 图片字节大小(kb为单位)
*/
sizeKb?: number
/**
* 原图字节大小(kb为单位)
* 如果设置了这个字段,并且有原图url,则显示查看原图按钮
*/
originSizeKb?: number
/**
* 原图url地址
*/
originUrl?: string
url: string
/**
* 没有的话会自动拉取
*/
width?: number
/**
* 没有的话会自动拉取
*/
height?: number
/**
* 图片字节大小(kb为单位)
*/
sizeKb?: number
/**
* 原图字节大小(kb为单位)
* 如果设置了这个字段,并且有原图url,则显示查看原图按钮
*/
originSizeKb?: number
/**
* 原图url地址
*/
originUrl?: string
}
export interface IImageSize {
width: number
height: number
// 图片加载状态
status: "loading" | "success" | "fail"
width: number
height: number
// 图片加载状态
status: "loading" | "success" | "fail"
}
built/image-viewer.component.js.map

Sorry, the diff of this file is not supported yet

built/image-viewer.style.js.map

Sorry, the diff of this file is not supported yet

built/image-viewer.type.js.map

Sorry, the diff of this file is not supported yet

src/image-viewer.component.tsx

Sorry, the diff of this file is not supported yet