diff --git a/zh-cn/jeanregisser-react-native-slider.md b/zh-cn/jeanregisser-react-native-slider.md index d16e0c95f6e4c2948f9c46953ef56d6f0442f1fc..809c8b4c9f2baf69fde673e5e3eb37bca9c81469 100644 --- a/zh-cn/jeanregisser-react-native-slider.md +++ b/zh-cn/jeanregisser-react-native-slider.md @@ -1,11 +1,14 @@ -> 模板版本:v0.1.3 +> 模板版本:v0.2.2

jeanregisser-react-native-slider

- + + Supported platforms + + License

@@ -36,7 +39,7 @@ yarn add @react-native-oh-tpl/react-native-slider@file:# -快速使用: +下面的代码展示了这个库的基本使用场景: > [!WARNING] 使用时 import 的库名不变。 @@ -145,36 +148,44 @@ const styles = StyleSheet.create({ }); ``` +## 约束与限制 + ### 兼容性 要使用此库,需要使用正确的 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 | Description | Type | Required | Platform | HarmonyOS Support | -| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- | -------- | -------- | ----------------- | -| value | Initial value of the slider. | number | No | All | yes | -| disabled | If true the user won't be able to move the slider. | bool | No | All | yes | -| minimumValue | Initial minimum value of the slider. | number | No | All | yes | -| maximumValue | Initial maximum value of the slider. | number | No | All | yes | -| step | Step value of the slider. The value should be between 0 and maximumValue - minimumValue). | number | No | All | yes | -| minimumTrackTintColor | The color used for the track to the left of the button. | string | No | All | yes | -| maximumTrackTintColor | The color used for the track to the right of the button. | string | No | All | yes | -| thumbTintColor | The color used for the thumb. | string | No | All | yes | -| thumbTouchSize | 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. | object | No | All | yes | -| onValueChange | Callback continuously called while the user is dragging the slider. | function | No | All | yes | -| onSlidingStart | Callback called when the user starts changing the value (e.g. when the slider is pressed). | function | No | All | yes | -| onSlidingComplete | Callback called when the user finishes changing the value (e.g. when the slider is released). | function | No | All | yes | -| style | The style applied to the slider container. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | All | yes | -| trackStyle | The style applied to the track. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | All | yes | -| thumbStyle | The style applied to the thumb. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | All | yes | -| thumbImage | Sets an image for the thumb. | [source](http://facebook.github.io/react-native/docs/image.html#source) | No | All | yes | -| debugTouchArea | Set this to true to visually see the thumb touch rect in green. | bool | No | All | yes | -| animateTransitions | Set to true if you want to use the default 'spring' animation. | bool | No | All | yes | -| animationType | 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). | string | No | All | yes | -| animationConfig | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). | object | No | All | yes | +## 属性 + +以下为目前已支持的组件属性: + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 +> +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | -------- | ----------- | ----------------- | +| value | Initial value of the slider. | number | No | ios,android | yes | +| disabled | If true the user won't be able to move the slider. | bool | No | ios,android | yes | +| minimumValue | Initial minimum value of the slider. | number | No | ios,android | yes | +| maximumValue | Initial maximum value of the slider. | number | No | ios,android | yes | +| step | Step value of the slider. The value should be between 0 and maximumValue - minimumValue). | number | No | ios,android | yes | +| minimumTrackTintColor | The color used for the track to the left of the button. | string | No | ios,android | yes | +| maximumTrackTintColor | The color used for the track to the right of the button. | string | No | ios,android | yes | +| thumbTintColor | The color used for the thumb. | string | No | ios,android | yes | +| thumbTouchSize | 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. | object | No | ios,android | yes | +| onValueChange | Callback continuously called while the user is dragging the slider. | function | No | ios,android | yes | +| onSlidingStart | Callback called when the user starts changing the value (e.g. when the slider is pressed). | function | No | ios,android | yes | +| onSlidingComplete | Callback called when the user finishes changing the value (e.g. when the slider is released). | function | No | ios,android | yes | +| style | The style applied to the slider container. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | ios,android | yes | +| trackStyle | The style applied to the track. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | ios,android | yes | +| thumbStyle | The style applied to the thumb. | [style](http://facebook.github.io/react-native/docs/view.html#style) | No | ios,android | yes | +| thumbImage | Sets an image for the thumb. | [source](http://facebook.github.io/react-native/docs/image.html#source) | No | ios,android | yes | +| debugTouchArea | Set this to true to visually see the thumb touch rect in green. | bool | No | ios,android | yes | +| animateTransitions | Set to true if you want to use the default 'spring' animation. | bool | No | ios,android | yes | +| animationType | 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). | string | No | ios,android | yes | +| animationConfig | Used to configure the animation parameters. These are the same parameters in the [Animated library](https://facebook.github.io/react-native/docs/animations.html). | object | No | ios,android | yes | ## 遗留问题