From 17667ce231bd1fa8fe580352599ea6eb5431225b Mon Sep 17 00:00:00 2001 From: hewei Date: Mon, 29 Apr 2024 10:54:11 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9KKLU]=20=E6=96=B0=E5=A2=9E=20reac?= =?UTF-8?q?t-native-multi-slider=20=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-multi-slider.md | 408 +++++++++++++++++++++++++++++ 1 file changed, 408 insertions(+) create mode 100644 zh-cn/react-native-multi-slider.md diff --git a/zh-cn/react-native-multi-slider.md b/zh-cn/react-native-multi-slider.md new file mode 100644 index 00000000..a615aa38 --- /dev/null +++ b/zh-cn/react-native-multi-slider.md @@ -0,0 +1,408 @@ +> 模板版本：v0.1.3 + +

+

react-native-multi-slider

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-multi-slider) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases)，并下载适用版本的 tgz 包 + +进入到工程目录并输入以下命令： + + + +> [!tip] # 处替换为 tgz 包的路径 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-multi-slider@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-multi-slider@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] 使用时 import 的库名不变。 + +```tsx +import React from 'react'; + +import { StyleSheet, View, Text, ScrollView, Alert, Animated, Image } from 'react-native'; +import MultiSlider from 'react-native-multi-slider'; + +const AnimatedView = Animated.createAnimatedComponent(View); + +CustomLabel.defaultProps = { + leftDiff: 0, +}; + +const width = 50; +const pointerWidth = width * 0.47; + +function LabelBase(props:any) { + const { position, value, leftDiff, pressed } = props; + const scaleValue = React.useRef(new Animated.Value(0.1)); // Behaves oddly if set to 0 + const cachedPressed = React.useRef(pressed); + + React.useEffect(() => { + Animated.timing(scaleValue.current, { + toValue: pressed ? 1 : 0.1, + duration: 200, + delay: pressed ? 0 : 2000, + useNativeDriver: false, + }).start(); + cachedPressed.current = pressed; + }, [pressed]); + + return ( + Number.isFinite(position) && + Number.isFinite(value) && ( + + + {value} + + ) + ); +} + +function CustomLabel(props:any) { + const { + leftDiff, + oneMarkerValue, + twoMarkerValue, + oneMarkerLeftPosition, + twoMarkerLeftPosition, + oneMarkerPressed, + twoMarkerPressed, + } = props; + + return ( + + + + + ); +} + +class CustomMarker extends React.Component { + render() { + return ( + + {this.props.valuePrefix}{this.props.currentValue} + + {this.props.valueSuffix}{this.props.currentValue} + + ); + } +} + +function MultiSliderProps(){ + + // 滑动指标配置 + const touchDimensionsConfig = {height: 60,width: 60,borderRadius: 10,slipDisplacement: 200} + + // 当值开始变化时回调 + const onValuesChangeStart = () => Alert.alert('Success', '值开始变化时回调') + + // 值改变时回调 + const onValuesChange = () => Alert.alert('Success', '值改变时回调') + + // 当值停止变化时回调 + const onValuesChangeFinish = () => Alert.alert('Success', '值停止变化时回调') + + // 第一个光标切换时回调 + const onToggleOne = () => Alert.alert('Success', '第一个光标切换回调') + + // 第二个光标切换时回调 + const onToggleTwo = () => Alert.alert('Success', '第二个光标切换回调') + + + return ( + + + MultiSlider功能验证 + + values（设置values） + + + onValuesChangeStart（值开始变化触发回调） + + + onValuesChange（值改变时回调触发回调） + + + onValuesChangeFinish（当值停止变化时回调） + + + sliderLength（滑块长度{100}） + + + touchDimensions（滑动指标borderRadius 50） + + + enableLabel（开启自定义标签） + + + customMarker（自定义光标） + + + customMarkerLeft/Right（自定义左右光标） + } + customMarkerRight={() => } + /> + + isMarkersSeparated（禁止两个光标重叠） + + + min（滑块可用最小值3） + + + max（滑块可用最大值8） + + + step（滑块步长5） + + + optionsArray（节点标记） + + + style（滑块样式） + + + valuePrefix（值的前缀 b） + + + valueSuffix（值的后缀 a） + + + enabledOne（启用第一个光标） + + + enabledTwo（启用第二个光标） + + + onToggleOne + + + onToggleTwo + + + allowOverlap（允许光标重叠） + + + snapped（步进式移动光标） + + + vertical（垂直方向） + + + markerOffsetX（横向偏移） + + + markerOffsetY（纵向偏移） + + + minMarkerOverlapDistance（避免大光标重叠） + + + imageBackgroundSource（背景图片） + + + + + ) +} + +const labelStyles = StyleSheet.create({ + parentView: { + position: 'relative', + }, + sliderLabel: { + position: 'absolute', + justifyContent: 'center', + bottom: '100%', + width: width, + height: width, + }, + sliderLabelText: { + textAlign: 'center', + lineHeight: width, + borderRadius: width / 2, + borderWidth: 2, + borderColor: '#999', + backgroundColor: '#fff', + flex: 1, + fontSize: 18, + color: '#aaa', + }, + pointer: { + position: 'absolute', + bottom: -pointerWidth / 4, + left: (width - pointerWidth) / 2, + transform: [{ rotate: '45deg' }], + width: pointerWidth, + height: pointerWidth, + backgroundColor: '#999', + }, +}); + +const markerStyles = StyleSheet.create({ + image: { + height: 40, + width: 40, + }, + text: { + alignSelf: 'center', + paddingVertical: 20, + }, + title: { + fontSize: 30, + }, +}); + +const styles = StyleSheet.create({ + container: { + flex: 1, + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + }, + sliders: { + margin: 20, + width: 280, + }, + text: { + alignSelf: 'center', + paddingVertical: 20, + }, + title: { + fontSize: 30, + }, + sliderOne: { + flexDirection: 'row', + justifyContent: 'space-around', + }, + }); + +export default MultiSliderProps; +``` + +## 约束与限制 + +### 兼容性 + +要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 + +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-multi-slider Releases](https://github.com/react-native-oh-library/react-native-multi-slider/releases) + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1; IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +以下属性已验证，详情见 [react-native-multi-slider 源库地址](https://github.com/ptomasroos/react-native-multi-slider) + +**组件 MultiSlider** + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- | -------- | -------- | ----------------- | +| values | Prefixed values of the slider. | array of numbers | NO | All | YES | +| onValuesChangeStart | Callback when the value starts changing | function | NO | All | YES | +| onValuesChange | Callback when the value changes | function | NO | All | YES | +| onValuesChangeFinish | Callback when the value stops changing | function | NO | All | YES | +| sliderLength | Length of the slider | number | NO | All | YES | +| touchDimensions | Defines the size of the touch area of the slider | object | NO | All | YES | +| enableLabel | Enable the label rendering | function | NO | All | YES | +| customLabel | Component used for rendering a label above the cursors. | function | NO | All | YES | +| customMarker | Component used for the cursor. | function | NO | All | YES | +| customMarkerLeft | Component used for the left cursor. | function | NO | All | YES | +| customMarkerRight | Component used for the right cursor. | function | NO | All | YES | +| isMarkersSeparated | Enable custom left and right cursors | boolean | NO | All | YES | +| min | Minimum value available in the slider. | number | NO | All | YES | +| max | Maximum value available in the slider. | number | NO | All | YES | +| step | Step value of the slider. | number | NO | All | YES | +| optionsArray | Possible values of the slider. Ignores min and max. | array of numbers | NO | All | YES | +| {container/track/selected/unselected/ markerContainer/marker/pressedMarker} Style | Styles for the slider | style object | NO | All | YES | +| valuePrefix | Prefix added to the value. | string | NO | All | YES | +| valueSuffix | Suffix added to the value. | string | NO | All | YES | +| enabledOne | Enables the first cursor | boolean | NO | All | YES | +| enabledTwo | Enables the second cursor | boolean | NO | All | YES | +| onToggleOne | Listener when first cursor toggles. | function callback | NO | All | YES | +| onToggleTwo | Listener when second cursor toggles. | function callback | NO | All | YES | +| allowOverlap | Allow the overlap within the cursors. | boolean | NO | All | YES | +| snapped | Use this when you want a fixed position for your markers, this will split the slider in N specific positions | boolean | NO | All | YES | +| vertical | Use vertical orientation instead of horizontal. | boolean | NO | All | YES | +| markerOffsetX | Offset first cursor. | number | NO | All | YES | +| markerOffsetY | Offset second cursor. | number | NO | All | YES | +| minMarkerOverlapDistance | if this is > 0 and allowOverlap is false, this value will determine the closest two markers can come to each other. This can be used for cases where you have two markers large cursors and you don't want them to overlap. Note that markers will still overlap at the start if starting values are too near. | number | NO | All | YES | +| imageBackgroundSource | Specifies the source required for the ImageBackground | string | NO | All | YES | + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/APSL/react-native-multi-slider/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee