在 React Native 项目中，多个滑块和可扩展性滑块是常见需求。这个时候可以使用 npm 包 react-native-multi-slider-cloneable 来实现。
这个包支持多个滑块，滑块指针的位置，渐变条的宽度等等。本文将介绍如何使用这个包，包括安装和使用步骤以及示例代码。
1. 安装react-native-multi-slider-cloneable
你可以通过以下命令在你的 React Native 项目中安装 react-native-multi-slider-cloneable 包：
npm install react-native-multi-slider-cloneable
2. 使用
在 React Native 应用程序中使用它可以在Render方法中声明以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ---- - ---- ---------------
------ ----------- ---- --------------------------------------
------ ------- -------- ----- -
----- ------- --------- - ------------------- -----
----- ------------------ -------------------- - ------------------ ----
------ -
----- -------------------------
------------
------------------ ----------
------------------
------------------- -- --------------
-------
---------
--------
--------------------
--------------
--
------------
----------------------------- ---------------------
------------------
------------------- -- -------------------------
-------
--------
--------
--------------------
--------------
-------------------------
-------------------------
------------------- -- -
------ ----------------- -------------------- ---
--
-------------------- -- -
------ ------------------ -------------------- ---
--
--
-------
--
-
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
---------------- ----------
--
---以上代码创建了两个滑块。第一个滑块表示 Value 的范围是 0 - 100，而第二个滑块表示 MultiSliderValue 的范围是 0 - 10。第二个滑块中，传递自定义 Function 用来返回拖动的滑块。
-- -------------------- ---- -------
----- ---------------- - -- --- -- ----- -------- -- -
------
----- -------- --------- -- ---- --- --------
-------
--
----- ----------------- - -- --- -- ----- -------- -- -
------
----- -------- --------- -- ---- --- --------
-------
--属性
可以传递以下属性：
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| values | Array |
[0, 0] | 设置滑块位置值，第一个元素表示左边滑块的值，第二个元素表示右边滑块的值 |
| sliderLength | number |
280 |
设置滑块的长度，单位为 px |
| onValuesChange | Function |
val => console.log(val) |
当用户拖动滑块是触发触发 |
| min | number |
0 |
滑块最小值 |
| max | number |
10 |
滑块最大值 |
| step | number |
1 |
选择器阶梯的数量 |
| allowOverlap | boolean |
false |
是否允许叠加 |
| snapped | boolean |
false |
用户拖动滑块时是否启用强制选项 |
| customMarkerLeft | Function |
undefined |
此函数需要返回要在左侧的渲染器，拖动时调用该函数 |
| customMarkerRight | Function |
undefined |
此函数需要返回要在右侧的渲染器，拖动时调用该函数 |
| isMarkersSeparated | boolean |
false |
是否在文本右侧为左/右滑块使用不同的输出 |
| markerSeparationValue | number |
0.1 |
浮开始点之间的间隔标记 |
结语
以上就是使用 npm 包 react-native-multi-slider-cloneable 的代码示例和完整说明。使用这个包可以让你轻松地构建复杂的滑块界面，对于具有拖动或多个滑块的交互的应用程序，非常重要。此外，本文所示的示例代码可以作为 React Native 项目的一个良好的开端，你可以将其扩展到更大的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c5881e8991b448e5da2