在移动端开发中，图像展示功能是常见的需求。在 React Native 中，可以使用 npm 包 react-native-zoom-image 来实现图像放大缩小、平移等基本操作。这个包简单易用，并且支持 iOS 和 Android 平台，本文将介绍其使用教程。
安装
使用 npm 安装 react-native-zoom-image：
npm install react-native-zoom-image --save
使用
在需要展示图像的组件中，引入 react-native-zoom-image：
import ZoomImage from 'react-native-zoom-image';
使用时，传入以下必要的 props：
- source：图像的地址或 require() 函数调用的结果。
- style：图像的样式，必须设置宽度和高度。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ --------- ---- --------------------------
----- --- - -- -- -
------ -
----- -------- ----- - ---
----------
-----------------------------
-------- ------ ------- ------- ------ --
--
-------
--
-
------ ------- ----配置
react-native-zoom-image 可以通过传入 prop 进行一些配置，下面介绍常用的配置项。
maximumZoomScale
设置图片最大放大倍数，默认为 3。
<ZoomImage maximumZoomScale={6} />enableScaling
设置是否允许放大，默认为 true。
<ZoomImage enableScaling={false} />enableSwipeDown
设置是否允许下滑关闭图片，默认为 true。
<ZoomImage enableSwipeDown={false} />onSwipeDown
下滑关闭图片时触发的回调函数。
<ZoomImage onSwipeDown={() => console.log('swipe down')} />结语
使用 react-native-zoom-image 可以快速实现图像展示和交互功能。除了本文介绍的属性，还有其他可供配置的属性，读者可前往 GitHub 了解更多。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be481e8991b448e5996