使用react-native-image-viewer实现大图预览
作者：xiangzhihong8
这篇文章主要介绍了使用react-native-image-viewer实现大图预览，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
react-native-image-viewer大图预览
在移动开发中，特别是涉及到图片的应用开发中，经常会遇到图片预览等功能，并且预览支持图片的放大和缩小，在Android原生开发中可以使用PhotoViewPager库实现，如果在React Native中，可以选择使用react-native-image-viewer。
先看一个实现的效果
实例
使用前需要先安装react-native-image-viewer库，安装命令如下：
npm i react-native-image-zoom-viewer --save
然后引入ImageViewer组件，然后设置图片的数据源即可，imageUrls接受一个图片数组。
下面是一个简单的实例代码
import React, {PureComponent, Component} from 'react'
import {View, Modal,Navigator} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
const images = [{
url: "https://avatars2.gitdubusercontent.com/u/7970947?v=3&s=460",
// url:
// "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1527660246058&di=6f0f1b19cf05a64317cbc5d2b3713d64&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0112a85874bd24a801219c7729e77d.jpg",
// props: {
// // headers: ...
// // source: require('./img.png')
// },
// freeHeight: true
},
{url: "https://avatars2.gitdubusercontent.com/u/7970947?v=3&s=460"}
];
export default class ImageZoom extends PureComponent {
state = {
index: 0,
modalVisible: true
};
render() {
return (
<View
style={{
padding: 10
}}
>
<Modal
visible={tdis.state.modalVisible}
transparent={true}
onRequestClose={() => tdis.setState({modalVisible: false})}>
<ImageViewer imageUrls={images} index={tdis.state.index}/>
</Modal>
</View>
)
}
}Props
react-native-image-viewer库提供了诸多的属性，常见的属性如下。
| 属性名 | type | 描述 | 默认值 |
| imageUrls(必填) | array | 图片数据源 | |
| enableImageZoom | boolean | 是否可以进行缩放操作 | true |
| onShowModal | (content?: JSX.Element) => void | 弹出大图回调 | () => {} |
| onCancel | () => void | 取消图片回调 | () => {} |
| fliptdreshold | number | 滑动到下一页的X值 | 80 |
| maxOverflow | number | 滑动到下一页的X位置最大值 | 300 |
| index | number | 初始显示第几张图片 | 0 |
| failImageSource | {uri: string} | 加载失败显示图片 | ” |
| loadingRender | () => React.ReactElement | 渲染loading | () => null |
| onSaveToCamera | (index?: number => void | 保存到相机的回调 | () => {} |
| onChange | (index?: number => void | 图片切换时触发 | () => {} |
| saveToLocalByLongPress | boolean | 是否开启长按保存图片到本地 | true |
| onClick | (onCancel?: function) => void | 单击事件 | (onCancel) => {onCancel()} |
| onDoubleClick | (onCancel?: function) => void | 双击事件 | (onCancel) => {onCancel()} |
| onSave | (url: string) => void | 保存图片到本地， | (onCancel) => {onCancel()} |
| renderFooter | () => React.ReactElement | 自定义头部 | () => null |
| renderFooter | () => React.ReactElement | 自定义尾部视图 | () => null |
| renderIndicator | (currentIndex?: number, allSize?) => React.ReactElement: number | 自定义计时器 | (currentIndex, allSize) => currentIndex + “/” + allSize |
| renderImage | (props: any) => React.ReactElement | 自定义Image组件 | (props) => |
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。