diff --git a/zh-cn/react-native-progress.md b/zh-cn/react-native-progress.md index 8f0aee6a27b6462e0937342d36c51fbe03d3ccb7..13024f9c2bd3daacfd27b198cecfbe95b33b0d47 100644 --- a/zh-cn/react-native-progress.md +++ b/zh-cn/react-native-progress.md @@ -1,11 +1,13 @@ - -> 模板版本:v0.1.3 +> 模板版本:v0.2.2

react-native-progress

+ Supported platforms + + License

@@ -14,7 +16,7 @@ ## 安装与使用 -请到三方库的 Releases 发布地址查看配套的版本信息:[<@react-native-oh-tpl/react-native-progress> Releases](https://github.com/react-native-oh-library/react-native-progress/releases),并下载适用版本的 tgz 包。 +请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-tpl/react-native-progress Releases](https://github.com/react-native-oh-library/react-native-progress/releases),并下载适用版本的 tgz 包。 进入到工程目录并输入以下命令: @@ -132,12 +134,13 @@ const styles = StyleSheet.create({ 如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](/zh-cn/react-native-svg.md)进行引入 -## 兼容性 +## 约束与限制 + +### 兼容性 -本文档内容基于以下版本验证通过: +要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 -1. RNOH:0.72.11; SDK:OpenHarmony(api11) 4.1.0.53; IDE:DevEco Studio 4.1.3.412; ROM:2.0.0.52; -2. RNOH:0.72.13; SDK:HarmonyOS NEXT Developer Preview1; IDE:DevEco Studio 4.1.3.500; ROM:2.0.0.58; +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息::[<@react-native-oh-tpl/react-native-progress> Releases](https://github.com/react-native-oh-library/react-native-progress/releases) ## 属性 @@ -145,85 +148,81 @@ const styles = StyleSheet.create({ > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 -详情见[react-native-progress](https://github.com/oblador/react-native-progress) - ### Properties for all progress components: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ------------------------------ | ---------------------------------------------------------------------------- | ------- | -------- | -------- | ----------------- | -| animated | Whether or not to animate changes to `progress`. | boolean | No | All | Yes | -| indeterminate | If set to true, the indicator will spin and `progress` prop will be ignored. | boolean | No | All | Yes | -| indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | number | No | All | Yes | -| progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | number | No | All | Yes | -| color | Fill color of the indicator. | string | No | All | Yes | -| unfilledColor | Color of the remaining progress. | string | No | All | Yes | -| borderWidth | Width of outer border, set to `0` to remove. | number | No | All | Yes | -| borderColor | Color of outer border. | string | No | All | Yes | +| animated | Whether or not to animate changes to `progress`. | boolean | No | Android、iOS | Yes | +| indeterminate | If set to true, the indicator will spin and `progress` prop will be ignored. | boolean | No | Android、iOS | Yes | +| indeterminateAnimationDuration | Sets animation duration in milliseconds when indeterminate is set. | number | No | Android、iOS | Yes | +| progress | Progress of whatever the indicator is indicating. A number between 0 and 1. | number | No | Android、iOS | Yes | +| color | Fill color of the indicator. | string | No | Android、iOS | Yes | +| unfilledColor | Color of the remaining progress. | string | No | Android、iOS | Yes | +| borderWidth | Width of outer border, set to `0` to remove. | number | No | Android、iOS | Yes | +| borderColor | Color of outer border. | string | No | Android、iOS | Yes | ### `Progress.Bar`: All of the props under _Properties_ in addition to the following: -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| --------------- | ------------------------------------------------------------------------------ | ------------------------------- | -------- | -------- | ----------------- | -| width | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | number \| null | No | All | Yes | -| height | Height of the progress bar. | number | No | All | Yes | -| borderRadius | Rounding of corners, set to `0` to disable. | number | No | All | Yes | -| useNativeDriver | Use native driver for the animations. | boolean | No | All | Yes | -| animationConfig | Config that is passed into the `Animated` function. | function | No | All | Yes | -| animationType | Animation type to animate the progress, one of: `decay`, `timing`, `spring`. | 'decay' \| 'timing' \| 'spring' | No | All | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| --------------- | ------------------------------------------------------------------------------ | ------------------------------- | -------- |--------------| ---------------- | +| width | Full width of the progress bar, set to `null` to use automatic flexbox sizing. | number \| null | No | Android、iOS | Yes | +| height | Height of the progress bar. | number | No | Android、iOS | Yes | +| borderRadius | Rounding of corners, set to `0` to disable. | number | No | Android、iOS | Yes | +| useNativeDriver | Use native driver for the animations. | boolean | No | Android、iOS | Yes | +| animationConfig | Config that is passed into the `Animated` function. | function | No | Android、iOS | Yes | +| animationType | Animation type to animate the progress, one of: `decay`, `timing`, `spring`. | 'decay' \| 'timing' \| 'spring' | No | Android、iOS | Yes | ### `Progress.Circle`: All of the props under _Properties_ in addition to the following: | Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- | -| size | Diameter of the circle. | number | No | All | Yes | -| endAngle | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | number | No | All | Yes | -| thickness | Thickness of the inner circle. | number | No | All | Yes | -| showsText | Whether or not to show a text representation of current progress. | boolean | No | All | Yes | -| formatText | A function returning a string to be displayed for the textual representation. | function | No | All | Yes | -| textStyle | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. | TextStyle | No | All | Yes | -| allowFontScaling | Whether or not to respect device font scale setting. | boolean | No | All | Yes | -| direction | Direction of the circle `clockwise` or `counter-clockwise`. | 'clockwise' \| 'counter-clockwise' | No | All | Yes | -| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes | -| fill | Fill color of the inner circle. | string | No | All | Yes | +| ---------------- | ---------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ------------- | +| size | Diameter of the circle. | number | No | Android、iOS | Yes | +| endAngle | Determines the endAngle of the circle. A number between `0` and `1`. The final endAngle would be the number multiplied by 2π | number | No | Android、iOS | Yes | +| thickness | Thickness of the inner circle. | number | No | Android、iOS | Yes | +| showsText | Whether or not to show a text representation of current progress. | boolean | No | Android、iOS | Yes | +| formatText | A function returning a string to be displayed for the textual representation. | function | No | Android、iOS | Yes | +| textStyle | Styles for progress text, defaults to a same `color` as circle and `fontSize` proportional to `size` prop. | TextStyle | No | Android、iOS | Yes | +| allowFontScaling | Whether or not to respect device font scale setting. | boolean | No | Android、iOS | Yes | +| direction | Direction of the circle `clockwise` or `counter-clockwise`. | 'clockwise' \| 'counter-clockwise' | No | Android、iOS | Yes | +| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | Android、iOS | Yes | +| fill | Fill color of the inner circle. | string | No | Android、iOS | Yes | ### `Progress.Pie`: All of the props under _Properties_ in addition to the following: | Name | Description | Type | Required | Platform | HarmonyOS Support | -| ---- | -------------------- | ------ | -------- | -------- | ----------------- | -| size | Diameter of the pie. | number | No | All | Yes | +| ---- | -------------------- | ------ | -------- | -------- | --------------- | +| size | Diameter of the pie. | number | No | Android、iOS | Yes | ### `Progress.CircleSnail`: | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | ----------------------------------------------------------------------------------------- | ---------------------------------- | -------- | -------- | ----------------- | -| animating | If the circle should animate. | boolean | No | All | Yes | -| hidesWhenStopped | If the circle should be removed when not animating. | boolean | No | All | Yes | -| size | Diameter of the circle. | number | No | All | Yes | -| color | Color of the circle, use an array of colors for rainbow effect. | string \| string[] | No | All | Yes | -| thickness | Thickness of the circle. | number | No | All | Yes | -| duration | Duration of animation. | number | No | All | Yes | -| spinDuration | Duration of spin (orbit) animation. | number | No | All | Yes | -| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | All | Yes | -| direction | Direction in which the circle spins, either "clockwise" or "counter-clockwise" (default). | 'clockwise' \| 'counter-clockwise' | No | All | Yes | +| animating | If the circle should animate. | boolean | No | Android、iOS | Yes | +| hidesWhenStopped | If the circle should be removed when not animating. | boolean | No | Android、iOS | Yes | +| size | Diameter of the circle. | number | No | Android、iOS | Yes | +| color | Color of the circle, use an array of colors for rainbow effect. | string \| string[] | No | Android、iOS | Yes | +| thickness | Thickness of the circle. | number | No | Android、iOS | Yes | +| duration | Duration of animation. | number | No | Android、iOS | Yes | +| spinDuration | Duration of spin (orbit) animation. | number | No | Android、iOS | Yes | +| strokeCap | Stroke Cap style for the circle `butt`, `square` or `round`. | 'butt' \| 'square' \| 'round' | No | Android、iOS | Yes | +| direction | Direction in which the circle spins, either "clockwise" or "counter-clockwise" (default). | 'clockwise' \| 'counter-clockwise' | No | Android、iOS | Yes | ## 遗留问题 -1、Progress.Circle 中的属性 fill 在 HarmonyOS 上默认显示黑色和默认无色不一致,定位是 svg 的属性配置有问题,当前通过修改 Circle.js 中默认 fill 的属性进行规避,后续 svg 修复该问题[issue#6](https://github.com/react-native-oh-library/react-native-svg/issues/6)后,修改的代码会移除。 +- [ ] Progress.Circle 中的属性 fill 在 HarmonyOS 上默认显示黑色和默认无色不一致,定位是 svg 的属性配置有问题,当前通过修改 Circle.js 中默认 fill 的属性进行规避,后续 svg 修复该问题: [issue#6](https://github.com/react-native-oh-library/react-native-svg/issues/6) -2、Progress.Circle中的属性color, unfilledColor,borderWith,borderColor中圆的颜色,在进行静态配置的时候颜色显示正常,在使用Button进行动态改变的时候,中间的圆会显示黑色和默认的颜色不一致,定位是svg的属性配置有问题,当前通过修改Circle.js中默认fill的属性进行规避,后续 svg 修复该问题[issue#7](https://github.com/react-native-oh-library/react-native-svg/issues/7)后,修改的代码会移除。 +- [ ] Progress.Circle中的属性color, unfilledColor,borderWith,borderColor中圆的颜色,在进行静态配置的时候颜色显示正常,在使用Button进行动态改变的时候,中间的圆会显示黑色和默认的颜色不一致,定位是svg的属性配置有问题,当前通过修改Circle.js中默认fill的属性进行规避,后续 svg 修复该问题: [issue#7](https://github.com/react-native-oh-library/react-native-svg/issues/7) -3、Progress.pie中的属性color,borderWith,borderColor中内圆的颜色,在进行静态配置的时候颜色显示正常,在使用Button进行动态改变的时候,中间的圆会显示黑色和默认的颜色不一致,定位是svg的属性有问题,pie传入给svg的值是正常的,svg处理逻辑有问题,修改svg修复该问题[issue#8](https://github.com/react-native-oh-library/react-native-svg/issues/8) +- [ ] Progress.pie中的属性color,borderWith,borderColor中内圆的颜色,在进行静态配置的时候颜色显示正常,在使用Button进行动态改变的时候,中间的圆会显示黑色和默认的颜色不一致,定位是svg的属性有问题,pie传入给svg的值是正常的,svg处理逻辑有问题,修改svg修复该问题: [issue#8](https://github.com/react-native-oh-library/react-native-svg/issues/8) ## 其他 ## 开源协议 -本项目基于 [MIT License](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ,请自由地享受和参与开源。 - - \ No newline at end of file +本项目基于 [The MIT License (MIT)](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ,请自由地享受和参与开源。 \ No newline at end of file