文档模板：v0.4.2

react-native-slider

本项目基于 react-native-slider 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-slider, 版本所属关系如下：

三方库名称	三方库版本（npm地址）	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	源码地址
@react-native-ohos/react-native-slider	~0.12.0	Gitcode Releases	0.77.* / 0.82.* / 0.84.*	否	API12+	0.11.0	master
@react-native-ohos/react-native-slider	~0.11.0	Gitcode Releases	0.72.*	否	API12+	0.11.0	br_rnoh0.72
@react-native-oh-tpl/react-native-slider	<= 0.11.0-0.1.5@deprecated	GitHub Releases(deprecated)	0.72.*	否	API12+	0.11.0	sig

简介

Slider 组件用于 React Native。
Slider 是一个纯 JavaScript 实现的滑动条组件，用于在指定范围内选择数值，并支持自定义轨道、滑块样式与交互回调！
开发者可以在无需依赖平台原生 Slider 的情况下，创造并交付一致的可视化数值选择体验。

下载安装

进入到工程目录并输入以下命令：

npm

npm i @react-native-ohos/react-native-slider

yarn

yarn add @react-native-ohos/react-native-slider

约束与限制

兼容性

本文档内容基于以下版本验证通过：

1. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
2. RNOH: 0.82.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.120 SP7;
3. RNOH: 0.84.2; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.2.636; ROM: 6.0.0.125;

使用示例

下面的代码展示了这个库的基本使用场景：

import React, { useState} from 'react';
import {Button, View, StyleSheet, Text } from 'react-native';
import Slider from 'react-native-slider';


export function SliderExample() {
    const [value, setValue] = useState(0.200);
    return (
        <View style={styles.sectionContainer}>
        <Text>default style</Text>
        <Slider value={0.2}/>

        <Text>with min,max and custom tints</Text>
        <Slider
         value={0.2}
         minimumTrackTintColor = '#1A9274'
         maximumTrackTintColor = '#D3D3D3'
         thumbTintColor = '#1A9274'
         />

        <Text>with style,thumbStyle,thumbStyle</Text>
        <Slider
         value={0.2}
         minimumTrackTintColor = '#1073FF'
         thumbTintColor = '#FFFFFF'
         style = {styles.style}
         trackStyle = {styles.trackStyle}
         thumbStyle = {styles.thumbStyle}
         />

        <Text>with thumbTouchSize,event</Text>
        <Slider
            value={0.2}
            thumbTintColor = '#1A9FF4'
            thumbTouchSize = {{width: 40, height: 40}}
            onValueChange={(val: number) => {
                console.log('===Slider onValueChange: ' + val);
            }}

            onSlidingStart={() => {
                console.log('===Slider onSlidingStart');
            }}

            onSlidingComplete={() => {
                console.log('===Slider onSlidingComplete');
            }}
        />

        <Text>with thumbImage</Text>
        <Slider
            value={0.2}
            thumbTouchSize = {{width: 40, height: 40}}
            thumbStyle = {styles.thumbStyle}
            thumbImage = {require('./resources/slider.png')}
        />

        <Text>with animateTransitions</Text>
        <Slider
            value={value}
            thumbTouchSize = {{width: 40, height: 40}}
            trackStyle = {styles.trackStyle}
            thumbStyle = {styles.thumbStyle}
          // thumbImage = {{uri: 'https://developer.harmonyos.com/assets/image/diqiu.png'}}
            animateTransitions = {true}
            animationType = 'timing'
            animationConfig = {{
              toValue: 1,
              duration: 1500,
              useNativeDriver: false,
            }}
        />

        <Button onPress={()=>{
            setValue(0.9);
        }}
        title="动画测试"
        color="#841584"
        />
        </View>
    );
}

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,
    }
  });

接口说明

组件

名称	参数类型	必填	平台	OpenHarmony平台支持	描述
Slider	SliderProps	yes	all	yes	Slider组件

Slider

SliderProps

名称	参数类型	默认值	必填	平台	OpenHarmony平台支持	描述
value	number	0	No	iOS/Android	yes	滑块的初始值。
disabled	boolean	false	No	iOS/Android	yes	如果为 true，用户将无法移动滑块。
minimumValue	number	0	No	iOS/Android	yes	滑块的初始最小值。
maximumValue	number	1	No	iOS/Android	yes	滑块的初始最大值。
step	number	0	No	iOS/Android	yes	滑块的步长值。该值应在 0 到 (maximumValue - minimumValue) 之间。
minimumTrackTintColor	string	'#3f3f3f'	No	iOS/Android	yes	滑块按钮左侧轨道的颜色。
maximumTrackTintColor	string	'#b3b3b3'	No	iOS/Android	yes	滑块按钮右侧轨道的颜色。
thumbTintColor	string	'#343434'	No	iOS/Android	yes	滑块按钮（thumb）的颜色。
thumbTouchSize	{ width: number; height: number }	{width: 40, height: 40}	No	iOS/Android	yes	允许移动滑块按钮的触摸区域大小。触摸区域的中心与可见的滑块按钮相同。这使得滑块按钮在视觉上可以很小，同时仍允许用户轻松移动它。
onValueChange	(value: number) => void	/	No	iOS/Android	yes	当用户拖动滑块时持续调用的回调函数。
onSlidingStart	(value: number) => void	/	No	iOS/Android	yes	当用户开始更改值时调用的回调函数（例如，当滑块被按下时）。
onSlidingComplete	(value: number) => void	/	No	iOS/Android	yes	当用户完成更改值时调用的回调函数（例如，当滑块被释放时）。
style	StyleProp<ViewStyle>	/	No	iOS/Android	yes	应用于滑块容器的样式。
trackStyle	StyleProp<ViewStyle>	/	No	iOS/Android	yes	应用于轨道的样式。
thumbStyle	StyleProp<ViewStyle>	/	No	iOS/Android	yes	应用于滑块按钮的样式。
thumbImage	source	/	No	iOS/Android	yes	为滑块按钮设置一张图片。
debugTouchArea	boolean	false	No	iOS/Android	yes	设置为 true 可以在视觉上看到绿色的滑块按钮触摸矩形区域。
animateTransitions	boolean	/	No	iOS/Android	yes	设置是否开启动画，为 true 时默认值'timing'。
animationType	'spring' | 'timing'	'timing'	No	iOS/Android	yes	设置为'spring' 或 'timing'，以使用这两种动画类型之一，并使用默认的 动画属性。
animationConfig	SpringAnimationConfig | TimingAnimationConfig	/	No	iOS/Android	yes	用于配置动画参数。这些参数与 Animated 库 中的参数相同。

遗留问题

无

其他

无

目录结构

/jeanregisser-react-native-slider       # 项目根目录
├── src/
│    └── Slider.js                      # RN 组件源码
├── harmony/                            # 鸿蒙适配占位（纯 JS 实现，无原生代码）
├── index.d.ts                          # TypeScript 类型定义
├── package.json                        # 包配置
├── README.md                           # 中文安装使用方法
└── README_en.md                        # 英文安装使用方法

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。