React Native 是一个使用 JavaScript 构建原生应用的框架，它可以在多个平台上实现共享代码的目标，从而提高开发效率。在 React Native 中，对于图片展示的需求，我们通常使用 Image 组件来实现。但是，当我们需要展示多张图片或者需要支持手势缩放时，Image 组件就无法满足我们的需求了。
这时，我们可以使用 react-native-modal-photo-view 这个 npm 包来实现高效的图片展示。
安装
在项目的根目录下，运行如下指令进行安装：
npm install react-native-modal-photo-view --save
基本用法
导入组件
首先，在使用 react-native-modal-photo-view 组件前，我们需要先将其导入到我们的项目中：
import PhotoViewModal from 'react-native-modal-photo-view';
渲染组件
接着，在需要展示图片的地方，将 PhotoViewModal 组件进行渲染：
<PhotoViewModal
visible={true}
source={{uri: 'https://example.com/image.jpg'}}
/>在上述代码中，我们使用了 source 属性来指定图片的地址。当图片加载完成后，组件将会展示该图片。
控制可见性
我们可以使用 visible 属性来控制组件的可见性。当该属性为 true 时，组件将会展示在屏幕上；反之，组件将会从屏幕上消失。
展示多张图片
如果需要展示多张图片，我们可以使用 renderIndicator 属性自定义指示器的样式和位置。例如，我们将指示器设置为 bottom，并使用了默认样式：
-- -------------------- ---- -------
---------------
--------------
-------------
- ---- -------------------------------- --
- ---- -------------------------------- --
- ---- -------------------------------- --
--
------------------------ ----- -- -
----- -------- --------- ----------- ------- - ---
----- -------- ------ ------- ---
------ - -- - ------
-------
-------
--
--在上述代码中，我们使用了 sourceList 属性来指定图片列表。renderIndicator 则定义了指示器的样式和排列方式。
支持手势缩放
如果需要支持手势缩放，我们可以设置 enableSwipeDown 和 onSwipeDown 属性。
例如，下面的代码将会启用手势缩放和向下滑动手势：
<PhotoViewModal
visible={true}
source={{ uri: 'https://example.com/image.jpg' }}
enableSwipeDown={true}
onSwipeDown={() => console.log('swipe down')}
/>当用户在组件上进行向下滑动手势时，组件将会触发 onSwipeDown 回调函数。我们可以在回调函数中实现一些相关的逻辑。
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----- ----- ----------------- ----- - ---- ---------------
------ -------------- ---- --------------------------------
----- ---------- - -
---------------------------------
---------------------------------
---------------------------------
--
----- --- - -- -- -
----- -------------- ---------------- - ----------------
----- --------------- ----------------- - -------------
----- ------------- - ----- -- -
------------------------
----------------------
--
------ -
----- -------- ----- -- ----------- --------- --------------- -------- ---
--------------------- ------ -- -
----------------- ----------- ----------- -- --------------------
------ -------- ------ ---- ------- --- -- --------- ---- --- -- --
-------------------
---
---------------
----------------------
--------- ---- ------------- --
----------------------
--------------- -- -----------------------
------------------------ ----- -- -
----- -------- --------- ----------- ------- - ---
----- -------- ------ ------- ---
------ - -- - ------
-------
-------
--
--
-------
--
--
------ ------- ----在上述代码中，我们首先渲染了多个图片，当用户选择了其中一张图片时，我们将其保存到 selectedImage 变量中，并以 PhotoViewModal 组件的方式展示图片。
总结
react-native-modal-photo-view 是一个功能强大的 npm 包，可以帮助我们轻松地实现图片展示和手势缩放的功能。在实际开发中，我们可以根据不同的需求来自定义组件的样式和功能，从而让我们的应用具有更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c7681e8991b448e5f4e