@react-native-ohos/react-native-slider

v0.12.2-beta.1

Published

3 days ago

A pure JavaScript <Slider /> component for react-native

文档模板：v0.4.2

该第三方库的仓库已迁移至 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

约束与限制

兼容性

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

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

使用示例

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

[!WARNING] 使用时 import 的库名不变。

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

接口说明

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "OpenHarmony Support"列为 yes 表示 OpenHarmony平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

组件

| 名称 | 参数类型 | 必填 | 平台 | 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) ，请自由地享受和参与开源。

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

简介