react-native-image-viewer:基于 React Native 的图片查看器项目

案例展示

Swiper 图片轮播

滑动时缩放

向下滑动

开始使用

安装

npm install react-native-image-zoom-viewer --save

基本用法

• 首先安装 create-react-native-app

$ npm install -g create-react-native-app

• 初始化一个 react-native 项目

$ create-react-native-app AwesomeProject

• 然后修改 AwesomeProject/App.js 文件如下：

import { Modal } from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';

const images = [
    {
        // 最简单的用法。
        url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
        
        // width: number
        // height: number
        // 可选，如果你知道图片大小，可以设置以优化性能
        
        // 你可以传递给 `<Image/>` 组件的属性。
        props: {
            // headers: ...
        }
    },
    {
        url: '',
        props: {
            // 或者你可以设置本地源。
            source: require('../background.png')
        }
    }
];

export default class App extends React.Component {
    render() {
        return (
            <Modal visible={true} transparent={true}>
                <ImageViewer imageUrls={images}/>
            </Modal>
        );
    }
}

属性

参数	类型	是否必填	描述	默认值
imageUrls	数组	是	图片源数据数组	无
enableImageZoom	布尔型	否	启用图片缩放功能	true
onShowModal	函数 (content?: JSX.Element) => void	否	显示模态对话框的回调函数	() => {}
onCancel	函数 () => void	否	关闭模态对话框的回调函数	() => {}
flipThreshold	数字	否	切换到下一页的滑动阈值	80
maxOverflow	数字	否	当前页面可向下一页面滑动的最大X位置	300
index	数字	否	图片的初始索引值	0
failImageSource	字符串，对象 {@linkcode {url: string}}	否	加载失败时的占位图资源	''
loadingRender	函数 () => React.ReactElement<any>	否	加载中的占位组件	() => null
onSaveToCamera	函数 (index?: number) => void	否	保存至相机的回调函数	() => {}
onChange	函数 (index?: number) => void	否	图片变化时的回调函数	() => {}
onMove	(position: IOnMove) => void 报告移动位置数据（用于构建覆盖层）	否	() => {}
saveToLocalByLongPress	布尔型	否	长按时启用保存至相册功能	true
onClick	函数 (onCancel?: function) => void	否	单击事件的回调函数	(onCancel) => {onCancel()}
onDoubleClick	函数 (onCancel?: function) => void	否	双击事件的回调函数	(onCancel) => {onCancel()}
onSave	函数 (url: string) => void	否	自定义保存图片到本地的方法，如果提供了此方法，则不会调用系统默认的Android方法，因为Android不支持保存远程图片到相册，你可以在Android中调用此回调来实现调用原生接口	无
renderHeader	函数 (currentIndex?: number) => React.ReactElement<any>	否	自定义头部组件	() => null
renderFooter	函数 (currentIndex?: number) => React.ReactElement<any>	否	自定义底部组件	() => null

| renderIndicator | 函数

(currentIndex?: number, allSize?: number) => React.ReactNode: number | 可选 | 自定义指示器元素 | (currentIndex, allSize) => currentIndex + "/" + allSize | | renderImage | 函数

(props: any) => React.ReactNode | 可选 | 定制图片组件 | (props) => <Image {...props} /> | | renderArrowLeft | 函数

() => React.ReactNode | 可选 | 自定义左侧箭头 | () => null | | renderArrowRight | 函数

() => React.ReactNode | 可选 | 自定义右侧箭头 | () => null | | onSwipeDown | 函数

() => void | 可选 | 向下滑动回调函数 | () => null | | footerContainerStyle | 对象

{someStyle: someValue} | 可选 | 用于承载您传递的页脚的自定义样式属性 | bottom: 0, position: "absolute", zIndex: 9999 | | backgroundColor | 字符串

white | 可选 | 组件背景颜色 | black | | enableSwipeDown | 布尔值 | 可选 | 开启向下滑动关闭图片查看器。向下滑动时，会触发 onCancel 回调。 | false | | swipeDownThreshold | 数字 | 可选 | 触发下拉功能的阈值 | | | doubleClickInterval | 数字 | 可选 | 双击间隔时间 | | | pageAnimateTime | 数字 | 可选 | 设置页面翻转动画时间 | 100 | | enablePreload | 布尔值 | 可选 | 预加载下一张图片 | false | | useNativeDriver | 布尔值 | 可选 | 是否使用useNativeDriver进行动画效果 | false | | menus | 函数

({cancel,saveToLocal}) => React.ReactNode | 可选 | 自定义菜单，包含两个方法：cancel用于隐藏菜单，saveToLocal用于保存图片至相册中 | | | menuContext | 对象

{someKey: someValue} | 可选 | 自定义菜单上下文信息 | { saveToLocal: '保存到相册', cancel: '取消' } |

开发模式

第一步，运行TS监听器

克隆此仓库后执行：

npm install
npm start

步骤 2，运行演示

cd demo
npm install
npm start

接着，扫描二维码，使用你的 Expo 应用 进行体验。

依赖项

依赖于 react-native-image-pan-zoom：https://github.com/ascoders/react-native-image-zoom