native下拉图片放大 react_react native 实现图片放大功能 （react-native-image-zoom-viewer）...
目录：
安装中间件 react-native-image-zoom-viewer
封装放大图片弹窗组件
调用弹窗组件
具体步骤
1. 安装中间件 react-native-image-zoom-viewer，参考官网 和 官网
版本：
"react": "16.8.3",
"react-native": "0.59.9",
"react-native-image-zoom-viewer": "^3.0.1",
安装方式：
npm install react-native-image-zoom-viewer --save
复制代码
2. 封装放大图片弹窗组件
新建 ZoomPictureModel.js 文件：
import React, { Component } from 'react';
import {
View,
StyleSheet,
Modal,
ActivityIndicator,
Dimensions
} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
const { width, height } = Dimensions.get('window');
const Width = () => { return width };
const Height = () => { return height };
/** 放大图片弹窗组件 */
class ZoomPictureModel extends Component {
constructor(props) {
super(props);
this.state = {
isShowImage: this.props.isShowImage,
loadingAnimating: true,
zoomImages: this.props.zoomImages,
currShowImgIndex: this.props.currShowImgIndex
}
}
componentWillReceiveProps(nextProps) {
if (this.state.isShowImage != nextProps.isShowImage) {
this.setState({
isShowImage: nextProps.isShowImage
})
}
if (this.state.zoomImages != nextProps.zoomImages) {
this.setState({
zoomImages: nextProps.zoomImages
})
}
if (this.state.currShowImgIndex != nextProps.currShowImgIndex) {
this.setState({
currShowImgIndex: nextProps.currShowImgIndex
})
}
}
handleZoomPicture(flag) {
this.setState({
isShowImage: flag
})
this.props.callBack(flag)
}
// 保存图片
savePhoto() {
// let index = this.props.curentImage;
// let url = this.props.imaeDataUrl[index];
// let promise = CameraRoll.saveToCameraRoll(url);
// promise.then(function (result) {
// alert("已保存到系统相册")
// }).catch(function (error) {
// alert('保存失败！\n' + error);
// });
}
// 图片加载
renderImageLoad() {
let { loadingAnimating } = this.state
return (
)
}
render() {
let { isShowImage, zoomImages, currShowImgIndex } = this.state
return (
visible={isShowImage}
animationType={"slide"}
transparent={true}
>
enableImageZoom={true}
saveToLocalByLongPress={false}
// menuContext={{ "saveToLocal": "保存图片", "cancel": "取消" }}
// onSave={(url) => { this.savePhoto(url) }}
// failImageSource={{
// url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', // 不能加载本地图片
// width: Width(),
// height: 300
// }}
loadingRender={() => this.renderImageLoad()}
enableSwipeDown={true}
imageUrls={zoomImages}
index={currShowImgIndex}
onClick={() => this.handleZoomPicture(false)}
/>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
zoom_pic_img: {
maxWidth: Width()
},
img_load: {
marginBottom: (Height() / 2) - 40
}
})
export default ZoomPictureModel;
复制代码
3、调用弹窗组件, 即可显示✌️
【`TestPage.js`】文件引用弹窗组件；
import React, { Component } from 'react';
import {
View,
StyleSheet,
Text,
Animated,
Easing,
InteractionManager,
TouchableOpacity,
Image,
SafeAreaView,
Dimensions
} from 'react-native';
import ZoomPictureModel from '../ZoomPictureModel';
class TestPage extends Component {
constructor(props) {
super(props);
this.state = {
isShowImage: false, // 显示弹窗组件
currShowImgIndex: 0 // 当前打开图片的index
}
}
// 展示/隐藏 放大图片
handleZoomPicture(flag, index) {
this.setState({
isShowImage: flag,
currShowImgIndex: index || 0
})
}
// 加载放大图片弹窗
renderZoomPicture() {
let { isShowImage, currShowImgIndex } = this.state
// 测试
let zoomImages = [{
url: 'https://tse2-mm.cn.bing.net/th/id/OIP.yPEBi69raqV5QW3aTmEQsgHaFj?pid=Api&rs=1',
props: {
// headers: ...
}
},{
url: 'https://img.locationscout.net/images/2017-01/alpe-di-siusi-italy_l.jpeg',
},{
url: 'https://tse2-mm.cn.bing.net/th/id/OIP.yPEBi69raqV5QW3aTmEQsgHaFj?pid=Api&rs=1'
}]
return (
isShowImage={isShowImage}
currShowImgIndex={currShowImgIndex}
zoomImages={zoomImages}
callBack={(flag) => this.handleZoomPicture(flag)}
>
)
}
render() {
return (
{ this.renderZoomPicture() }
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
})
export default TestPage;
复制代码
写给自己的随笔，有问题欢迎指出
复制代码