前言
在 React Native 开发中，使用 ViewPager 实现多页面滑动效果是非常常见的需求。不过，在 Android 平台上，ViewPager 自带缓存机制，而在 iOS 平台上不存在该机制，因此在 iOS 上，卡顿现象十分明显。为了实现一个在 iOS 上顺畅运行的 ViewPager，社区中也有不少成熟的开源解决方案。其中，react-native-pages 是较为流行的一种，它简单易用、样式和布局可定制性高，已经广泛应用于许多商业项目中。但是，该库在 iOS 平台下的性能表现也存在缺陷，尤其是在图片较多或者 GIF 动图等复杂内容的情况下，很容易产生卡顿、闪动等问题。针对该问题，社区中出现了许多针对性的优化，本文将会介绍其中一种方案，即 react-native-pages-fix，它通过在 iOS 平台上实现一个图片缓存机制来解决卡顿问题。
介绍 react-native-pages-fix
react-native-pages-fix 是在 react-native-pages 的基础上，新增加了图片缓存机制，并修复了一些已知的问题。与 react-native-pages 不同的是，react-native-pages-fix 的单页渲染使用了 class 组件代替了 react-native-pages 中的函数式组件，这也是为了方便进行数据和状态的维护。在图片列表较多的情况下，使用 react-native-pages-fix 可以有效地提升列表渲染的速度和流畅度。如果你的项目需要使用 ViewPager，并且对性能有较高的要求，react-native-pages-fix 是值得一试的。
安装 react-native-pages-fix
你可以使用 npm / yarn 安装该库。
npm install react-native-pages-fix --save
或者
yarn add react-native-pages-fix
为了正常使用该库，你需要在项目中安装 react-native、react-native-gesture-handler、react-native-fast-image 三个依赖。
npm install react-native react-native-gesture-handler react-native-fast-image --save
或者
yarn add react-native react-native-gesture-handler react-native-fast-image
使用 react-native-pages-fix
引入 react-native-pages-fix
import Pages from "react-native-pages-fix";
基本使用
基本使用方法和 react-native-pages 类似。构建一个页面数组，返回一个 Pages 组件即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ---- - ---- ---------------
------ ----- ---- -------------------------
------ ------- -------- ----- -
----- ----- - -
----- ------- -------- ----- -- ---------------- ----- ---
---------- --------
--------
----- ------- -------- ----- -- ---------------- ------- ---
---------- --------
--------
----- ------- -------- ----- -- ---------------- ------ ---
---------- --------
-------
--
------ -----------------------
-属性
react-native-pages-fix 同样支持 react-native-pages 中的大多数属性。接下来我们将介绍 react-native-pages-fix 中扩展的属性和使用方法。
preload
preload 属性指定预加载的图片数。默认情况下，react-native-pages-fix 只会预加载当前和下一张图片，可以通过 preload 属性来修改加载数量。
<Pages preload={2}>{pages}</Pages>useCache
useCache 属性指定是否开启图片缓存。开启后，图片文件将被缓存，下次加载时直接从缓存中读取而不再从磁盘读取。当图片列表较大时，启用缓存能够明显提升滑动性能。
<Pages useCache={true}>{pages}</Pages>removeClippedSubviews
removeClippedSubviews 属性指定是否在滑动过程中删除掉屏幕上已经看不到的图片。建议在图片列表较大时启用该属性以提升滑动性能。
<Pages removeClippedSubviews={true}>{pages}</Pages>onPageSelected
onPageSelected 是 react-native-pages-fix 中引入的一个新属性，它指定页面切换后的回调函数。
const handlePageSelected = (pageNum) => {
console.log(pageNum);
};
<Pages onPageSelected={handlePageSelected}>{pages}</Pages>;其他
如果你需要对每一个页面进行数据处理，可以使用 React 组件的方法。下面提供一个简单的示例。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ----- ---- -------------------------
----- ---- ------- --------- -
------------------ -
-------------
---------- - -
------ --
------- ----
--
-
------------------- -
-- ----
---------------------------------
---------------- -- ----------------
-------------------- -- -
---------------
------ ------------------
---
--
-------------- -- -
---------------------
---
-- ----
------------------------------------------ ------- ------- -- -
---------------
------- -
---- ----------------------------
------
------
-
---
---
-
-------- -
------ -
------
------------ -------------------------
------ -------------------------- --
-------
--
-
-
------ ------- -------- ----- -
----- ----- - -
----- ------- ---
----- ------- ---
----- ------- --
--
------ -----------------------
-结语
react-native-pages-fix 的代码量不多，易于阅读，并且能有效的提高 viewPager 的性能表现。希望本文能够帮助那些在开发 React Native 中需要使用 ViewPager 的开发者，在提升项目性能方面，有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005601381e8991b448de16f