React Native Super Photo View 是一个用于 React Native 应用程序的开源 npm 包。这个包的作用是实现图片浏览的功能，优化展示大图体验，支持手势缩放，支持旋转、平移等交互操作。
本篇文章将详细介绍 npm 包 React Native Super Photo View 的使用方法，包括安装、引入、调用以及配置等。
安装
React Native Super Photo View 可以通过 npm 安装：
npm install react-native-super-photo-view --save
如果使用 yarn，可以通过以下方式安装：
yarn add react-native-super-photo-view
引入
在 React Native 应用程序中，你可以通过以下方式引入 React Native Super Photo View：
import SuperPhotoView from 'react-native-super-photo-view';
使用
使用 React Native Super Photo View，需要创建一个超级图片浏览器，通过 props 来传递参数。例如：
<SuperPhotoView
source={require('./sample_image.png')}
resizeMode='contain'
maximumZoomScale={5}
doubleTapScale={2}
/>上述代码创建了一个超级图片浏览器，将展示 ./sample_image.png 这张图片，设置了一些可选参数：resizeMode、maximumZoomScale、doubleTapScale。
其中，resizeMode 表示图片的显示模式，可以是以下字符串之一：
cover– 显示完整图片或图片被缩放以适应其可见框。contain– 显示整张图片并尽可能部分显示图片。这是默认值。stretch– 伸展图片以适应整个容器。
maximumZoomScale 表示最大缩放比例，默认值为 3。
doubleTapScale 表示双击缩放比例，也就是点击两次图片后，放大到的缩放比例。默认值为 1.5。
创建超级图片浏览器后，还可以通过调用 ref 获取组件的实例，并对实例进行一些操作：
<SuperPhotoView
source={require('./sample_image.png')}
resizeMode='contain'
maximumZoomScale={5}
doubleTapScale={2}
ref={(ref) => { this.superPhotoViewRef = ref; }} // 获取实例引用
/>获取到实例引用后，还可以调用实例的方法。例如，可以调用 this.superPhotoViewRef.rotate() 方法旋转图片：
this.superPhotoViewRef.rotate(90);
调用 this.superPhotoViewRef.setCurrentOrigin({ x, y }) 方法设置当前显示区域的左上角坐标。
完整示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----------- ---- - ---- ---------------
------ -------------- ---- --------------------------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
------- --
-------------- - -- -- -- - --
--
-
------ - -- -- -
----- ------ - ----------------- - ---
--------------- ------- ------ - --- ---
-----------------------------
-
---- - -- -- -
----- - ------------- - - -----------
----- - - --------------- - ---
----- - - --------------- - ---
--------------- -------------- - -- - - ---
------------------------------------ -- - ---
-
-------- -
----- - ------- ------------- - - -----------
------ -
----- -------------------------
---------------
--------------------------------------
--------------------
--------------------
------------------
---------- -- - ----------------- - ---- --
-------------------------
----------------------------
--------------------------
-----------------------------
----------------- -- -
----- - -- - - - -------------------------
--------------- ---- -- ---
--
---------------- -- -
----------------------- -------------------------
--
------------- -- -------------------------
--------------- -- ---------------------------
--------------- -- ---------------------------
---------------- -- ----------------------------
--------------- -- ---------------------------
--------------- -- ---------------------------
--------- -- ---------------------
--------
---------- -- ------- -------------- ---
----- --
---------------- -------
--
-----------------------------
--
-------
--
-
-
----- ------ - -------------------
---------- -
----- --
--
---注意事项
- React Native Super Photo View 目前的版本不支持
source参数接收一个 URL； - React Native Super Photo View 并不是一个完美的图片浏览器，还需要配合其他的 npm 包和组件一起使用，例如 react-native-image-picker、react-native-fs、react-native-countdown-circle 这些组件。
总结
React Native Super Photo View 是一个非常实用的 npm 包，封装了图片的展示交互方面的开发难点，并且提供了丰富的参数和回调函数，让开发者可以定制化自己的图片浏览器。当然，它并不是万能的，需要配合其他的组件和 npm 包一起使用，才能实现更完美的图片浏览效果。
希望本篇 React Native Super Photo View 的使用教程可以对大家有所帮助，帮助大家使用这个 npm 包开发更好的 React Native 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600573d881e8991b448e9c4e