有时在移动应用中需要使用滑块（Slider）控件，用于用户根据他们的意愿以不同的方式调整应用程序的值。React Native 不提供免费的滑块控件。因此，我们需要使用第三方滑块组件。其中一个非常流行的包是 react-native-multi-slider-benestudio。
本篇文章将介绍 react-native-multi-slider-benestudio 的使用方式，包括安装、导入、示例代码和一些注意事项。
安装
在使用 react-native-multi-slider-benestudio 之前，必须先在您的项目中安装它。安装过程如下：
--- ------- ------------------------------------ --
导入
在安装完包之后，我们可以开始导入该组件。导入方法如下：
------ ----------- ---- ----------------------------------------
示例
下面是一个基本的示例。该示例展示了如何创建一个基本的滑块控件。
------ ------ - --------- - ---- --------
------ - ---- - ---- ---------------
------ ----------- ---- ----------------------------------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
----------------- --- ---
--
-
----------------------- - -------- -- -
---------------
----------------- -------
---
--
-------- -
------ -
------
------------
------------------------------------
------------------
---------------------------------------------
-------
--------
--------
--
-------
--
-
-在此示例中，我们创建了一个基本滑块控件，它具有以下属性：
values：一个数组，数组的第一个值代表滑块的左值，第二个值代表滑块的右值。sliderLength：滑块轨道的长度。onValuesChange：当用户拖动滑块时调用的回调函数。min：滑块取值的最小值。max：滑块取值的最大值。step：滑块的步长。
在这个示例中，我们将 multiSliderValuesChange 函数传递给组件的 onValuesChange 属性。这个函数将新的值设置到状态中，以便我们可以在用户拖动滑块时动态显示它们。
注意事项
react-native-multi-slider-benestudio 目前处于活跃状态，它有一些很好的特性和定制化选项。
如果你对这个控件感兴趣，你可以去查看他的 GitHub 仓库并开始贡献。
结论
在本篇文章中，我们介绍了如何使用 react-native-multi-slider-benestudio 来创建滑块控件。使用这个第三方组件能够节省我们做同样任务的时间和精力。我们从安装到在屏幕中渲染出一个完整的示例代码，相信大家都学到不少有用的知识。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005528b81e8991b448d003f