+
+
+> [!tip] [Github 地址](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/tree/sig)
+
+## 安装与使用
+
+进入到工程目录并输入以下命令：
+
+
+
+#### **yarn**
+
+```bash
+yarn add @react-native-oh-tpl/react-native-slider
+```
+
+#### **npm**
+```bash
+npm i --save @react-native-oh-tpl/react-native-slider
+```
+
+
+下面的代码展示了这个库的基本使用场景：
+
+```js
+import React, { useState} from 'react';
+import {Button, View, StyleSheet, Text } from 'react-native';
+import Slider from 'react-native-slider';
+
+
+export function SliderExample() {
+ const [isCheckerboardVisible, setIsCheckerboardVisible] = useState(false);
+ const [value, setValue] = useState(0.200);
+ return (
+
+ default style
+
+
+ with min,max and custom tints
+
+
+ with style,thumbStyle,thumbStyle
+
+
+ with thumbTouchSize,event
+ {
+ console.log('===Slider onValueChange: ' + value);
+ }}
+
+ onSlidingStart={() => {
+ console.log('===Slider onSlidingStart');
+ }}
+
+ onSlidingComplete={() => {
+ console.log('===Slider onSlidingComplete');
+ }}
+ />
+
+ with thumbImage
+
+
+ with animateTransitions
+
+
+
+ );
+}
+
+const styles = StyleSheet.create({
+ sectionContainer: {
+ marginTop: 32,
+ paddingHorizontal: 24,
+ },
+ style: {
+ backgroundColor: '#EECBA8',
+ },
+ trackStyle: {
+ backgroundColor: '#D2D2D2',
+ height:3
+ },
+ thumbStyle: {
+ backgroundColor: '#F3F3F3',
+ width: 30,
+ height: 30,
+ borderRadius: 15,
+ }
+ });
+```
+### 兼容性
+
+要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。
+
+请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-library/jeanregisser-react-native-slider Releases](https://github.com/react-native-oh-library/jeanregisser-react-native-slider/releases)
+
+#### 属性
+
+| Prop | Type | Optional | Default | Description |
+| --------------------- | ------------------------------------------------------------ | -------- | ------------------------- | ------------------------------------------------------------ |
+| value | number | Yes | 0 | Initial value of the slider |
+| disabled | bool | Yes | false | If true the user won't be able to move the slider |
+| minimumValue | number | Yes | 0 | Initial minimum value of the slider |
+| maximumValue | number | Yes | 1 | Initial maximum value of the slider |
+| step | number | Yes | 0 | Step value of the slider. The value should be between 0 and maximumValue - minimumValue) |
+| minimumTrackTintColor | string | Yes | '#3f3f3f' | The color used for the track to the left of the button |
+| maximumTrackTintColor | string | Yes | '#b3b3b3' | The color used for the track to the right of the button |
+| thumbTintColor | string | Yes | '#343434' | The color used for the thumb |
+| thumbTouchSize | object | Yes | `{width: 40, height: 40}` | The size of the touch area that allows moving the thumb. The touch area has the same center as the visible thumb. This allows to have a visually small thumb while still allowing the user to move it easily. |
+| onValueChange | function | Yes | | Callback continuously called while the user is dragging the slider |
+| onSlidingStart | function | Yes | | Callback called when the user starts changing the value (e.g. when the slider is pressed) |
+| onSlidingComplete | function | Yes | | Callback called when the user finishes changing the value (e.g. when the slider is released) |
+| style | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the slider container |
+| trackStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the track |
+| thumbStyle | [style](http://facebook.github.io/react-native/docs/view.html#style) | Yes | | The style applied to the thumb |
+| thumbImage | [source](http://facebook.github.io/react-native/docs/image.html#source) | Yes | | Sets an image for the thumb. |
+| debugTouchArea | bool | Yes | false | Set this to true to visually see the thumb touch rect in green. |
+| animateTransitions | bool | Yes | false | Set to true if you want to use the default 'spring' animation |
+| animationType | string | Yes | 'timing' | Set to 'spring' or 'timing' to use one of those two types of animations with the default [animation properties](https://facebook.github.io/react-native/docs/animations.html). |
+| animationConfig | object | Yes | undefined | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). |
+
+## 遗留问题
+
+## 其他
+
+## 开源协议
+
+本项目基于 [The MIT License (MIT)](https://github.com/jeanregisser/react-native-slider/blob/master/LICENSE) ，请自由地享受和参与开源。
\ No newline at end of file
+
+