有时在移动应用中需要使用滑块（Slider）控件，用于用户根据他们的意愿以不同的方式调整应用程序的值。React Native 不提供免费的滑块控件。因此，我们需要使用第三方滑块组件。其中一个非常流行的包是 react-native-multi-slider-benestudio。
本篇文章将介绍 react-native-multi-slider-benestudio 的使用方式，包括安装、导入、示例代码和一些注意事项。
安装
在使用 react-native-multi-slider-benestudio 之前，必须先在您的项目中安装它。安装过程如下：
npm install react-native-multi-slider-benestudio -S
导入
在安装完包之后，我们可以开始导入该组件。导入方法如下：
import MultiSlider from '@ptomasroos/react-native-multi-slider';
示例
下面是一个基本的示例。该示例展示了如何创建一个基本的滑块控件。
-- -------------------- ---- ------- ------ ------ - --------- - ---- -------- ------ - ---- - ---- --------------- ------ ----------- ---- ---------------------------------------- ------ ------- ----- --- ------- --------- - ------------------ - ------------- ---------- - - ----------------- --- --- -- - ----------------------- - -------- -- - --------------- ----------------- ------- --- -- -------- - ------ - ------ ------------ ------------------------------------ ------------------ --------------------------------------------- ------- -------- -------- -- ------- -- - -展开代码
在此示例中，我们创建了一个基本滑块控件，它具有以下属性：
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
