React Native 是 Facebook 开源的一套用于构建 iOS、Android和 Web 应用程序的框架。在 React Native 的丰富生态系统中，npm 组件包是一个重要的组成部分。
其中一个强大的 npm 包，就是 react-native-comparison-slider，它允许用户比对两张图片并进行拖拽式对比。它可以快速为你的 React Native 应用程序添加比对图片的功能。
在这篇文章中，我们将会探讨 react-native-comparison-slider 包的使用方法，其中会涵盖以下内容：
- 安装 react-native-comparison-slider 包
- 导入 react-native-comparison-slider 包
- 使用 react-native-comparison-slider 包及其属性
- 完整的 react-native-comparison-slider 包示例代码
安装 react-native-comparison-slider 包
安装 react-native-comparison-slider 包很简单，只需要在终端中运行以下命令即可：
npm install react-native-comparison-slider --save
这将会安装 react-native-comparison-slider 包并将其保存到你的项目的 dependencies 中。
导入 react-native-comparison-slider 包
在引入滑块之前，你需要在需要的组件中先导入它。
import ComparisonSlider from 'react-native-comparison-slider';
在导入成功后，你就可以开始在组件中使用 react-native-comparison-slider 包了。
使用 react-native-comparison-slider 包及其属性
在你的 React Native 应用程序中使用 react-native-comparison-slider 的过程中，你需要通过使用不同的属性来来定紧急买为你的应用程序提供空间、样式和显示图片的方式。
以下是 react-native-comparison-slider 包可用的属性：
imageWidth：设置比较的图片宽度。
imageHeight：设置比较的图片高度。
initialPosition：设置默认比较的比例（值为 0-1 之间的小数）。
leftImage：左边的图片（可以是一个 uri 或者是一个本地图片）。
rightImage：右边的图片（可以是一个 uri 或者是一个本地图片）。
sliderColor：设置滑块颜色。
sliderRatio：设置滑块占宽度的比例。
onPositionChanged：选中比例变化时调用的函数。
以下是 react-native-comparison-slider 的使用方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
------ ---------------- ---- ---------------------------------
------ ------- -------- ----- -
------ -
----- ------------- ----
-----------------
----------------
-----------------
---------------------
--------------------------------------------------
----------------------------------------------------
--------------------
-----------------
------------------------ -- ------------------------ -----
--
-------
--
-完整的 react-native-comparison-slider 包示例代码
如果想要尝试运行这一示例，首先需要新建一个 React Native 应用，然后尝试在其中添加下面的代码。值得注意的是，你可能需要先安装安装 react-native-comparison-slider 包。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------ ---- ---------------
------ ---------------- ---- ---------------------------------
------ ------- -------- ----- -
------ -
----- ------------- ----
-----------------
----------------
-----------------
---------------------
--------------------------------------------------
----------------------------------------------------
--------------------
-----------------
------------------------ -- ------------------------ -----
--
-------
--
-通过本文，你应该已经掌握了 react-native-comparison-slider 包的使用方法。使用这个强大的 npm 包，只需要几行代码，就可以轻松地在你的应用程序中添加一个垂直的比对图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671181e8991b448e355b