在 React Native 开发中，我们常常需要使用一些需要定制化的 UI 控件，而在 React Native 开发中常常使用的第三方 UI 控件库便是使用 npm 包进行安装和管理。其中一个非常有用的 UI 控件便是 react-native-multi-range，它可以方便地创建一个自定义的fi多值滑块条。本教程将详细介绍其的使用方法，包含示例代码，以供大家参考。
安装及导入
首先，在你的 React Native 项目目录下执行以下命令以安装 react-native-multi-range 包：
--- ------- ------------------------ ------
安装完毕后，在需要使用的组件中导入即可使用：
------ ----------- ---- ---------------------------
基本使用
如下所示是一个最基本的使用示例，在这个例子中会创建一个自定义的fi多值滑块条，可以拖动滑块条上的点来选择不同的值，同时也可在自定义样式中重新定义整个滑块条的样式：
------ ----- ---- --------
------ ------ ----------- ---- ---------------
------ ----------- ---- ---------------------------
----- ------- - -- -- -
----- -------- ---------- - ------------------ --- ------
----- ----------- - -
---------------- ----------
--
----- ----------- - -
------- ---
------ ---
------------- ---
---------------- --------
------------ ----------
------------ --
--
----- ------------- - -
---------------- ----------
--
------ -
----- -------------------------
------------
-------
---------
---------------
--------------------
--------
-------------------------
-------------------------
-----------------------------
------------------------- --- ------ --- ------------- ----
--
-------
--
--
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
---------------- ----------
--
---
------ ------- --------上述代码中，我们首先定义了一个 Example 组件，并在该组件中声明了一个状态 values，它是一个数组，用于控制多媒体滑块条在不同位置上的值。然后，我们使用 React.useState( ) 方法来进行状态管理。在 Example 组件内部，我们还定义了 sliderStyle、markerStyle 和 selectedStyle 三个自定义样式，分别表示滑块条的样式、滑动块的样式和表示已选择滑块条的样式。
在 Example 组件的渲染函数中，我们渲染一个 View 容器，包含一个 MultiSlider 组件，该组件传入了 min、max、values、onChange、step、sliderStyle、markerStyle、selectedStyle 和 touchDimensions 这些常规 props，这些 prop 用于指定多媒体滑块条的运作和样式。在上述示例中，我们指定 min 和 max 分别为 0 和 100，这样滑块条就具有了 0 至 100 的范围。接下来，我们将其传递给 values 属性，并使用 onChange 方法来注册滑块值的变化，这样在用户移动滑块条时，该函数将被调用。
关于样式，我们可以使用 sliderStyle、markerStyle 和 selectedStyle 这三个属性来进行自定义设置。使用者可以根据自己的项目需要进行定制，这一点非常方便。
props 详解
下表详细介绍了 MultiSlider 组件的所有 props：
| Prop 名称 | 类型 | 说明 |
|---|---|---|
| min | number (required) | 滑块条最小值 。 |
| max | number (required) | 滑块条最大值 。 |
| step | number (optional) | 设置滑块步长。 |
| values | number array (required) | 初始化滑块条位置和数量，值的数量必须大于 1。 |
| onValuesChangeStart | func (optional) | 滑块条触摸事件开始时的回调函数。 |
| onValuesChange | func (required) | 滑块条滑动后新值的回调函数。 |
| onValuesChangeFinish | func (optional) | 滑块条结束滑动后调用的回调函数。 |
| sliderLength | number (optional) | 滑块条长度，如果没有指定，则会自适应父元素的宽度。 |
| markerContainerStyle | style | 滑块条内的滑块的外部容器样式。 |
| markerStyle | style | 内部滑块的样式。 |
| selectedStyle | style | 表示有选择的滑块条的样式。 |
| unselectedStyle | style | 表示无选择的滑块条的样式。 |
| containerStyle | style | 容器样式。 |
| trackStyle | style | 滑块条轨迹的样式。 |
| touchDimensions | object (optional) | 设置触摸区域的高度、宽度、半径等。 |
| customMarker | element (optional) | 替换默认的滑动块，并传递属性来自定义滑动块。 |
还有其他有用的 props，例如：
- multiSliderValueFormatter: func (optional): 使用自定义的 formatter 更改显示在滑块条上的值。
- isMarkersSeparated: bool (optional): 设置滑块之间是否分离。
- sliderLength:number (optional): 设置滑块的长度。
总结
在这篇文章中，我们深入介绍了 react-native-multi-range 的基本使用和 props，希望能对 React Native 开发者有所帮助。该 npm 包提供了非常灵活的自定义和可定制的功能，可用于开发多种应用场景中的多值滑块条。
希望大家能够在日常开发中尝试使用此多媒体滑块条，增强自己的 React Native 开发技能，同时也希望我们能够共同努力，推动 React Native 生态的不断壮大与发展。
完整代码例子：
------ ----- ---- --------
------ - ----- ---------- - ---- ---------------
------ ----------- ---- ---------------------------
----- ------- - -- -- -
----- -------- ---------- - ------------------ --- ------
----- ----------- - -
---------------- ----------
--
----- ----------- - -
------- ---
------ ---
------------- ---
---------------- --------
------------ ----------
------------ --
--
----- ------------- - -
---------------- ----------
--
------ -
----- -------------------------
------------
-------
---------
---------------
--------------------
--------
-------------------------
-------------------------
-----------------------------
------------------ ------- --- ------ --- ------------- -- --
--
-------
--
--
----- ------ - -------------------
---------- -
----- --
----------- ---------
--------------- ---------
---------------- ----------
--
---
------ ------- --------来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055cb581e8991b448da2ca