From c3169d7264af2a852983782b901e4b037c8f1d83 Mon Sep 17 00:00:00 2001 From: zhukun Date: Tue, 30 Jan 2024 14:55:09 +0800 Subject: [PATCH 1/3] =?UTF-8?q?[Issues:=20#I8ZWAW]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-progress=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-progress.md | 211 ++++++++++++++++++++++++++++++++++ 1 file changed, 211 insertions(+) create mode 100644 1224/react-native-progress.md diff --git a/1224/react-native-progress.md b/1224/react-native-progress.md new file mode 100644 index 00000000..b17e6637 --- /dev/null +++ b/1224/react-native-progress.md @@ -0,0 +1,211 @@ +> 模板版本：v0.1.2 + +

+

react-native-action-button

+

+

+ + License + +

+ +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **yarn** + +``` +yarn add @react-native-oh-tpl/react-native-progress@5.0.1-0.0.1 +``` + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-progress@5.0.1-0.0.1 +``` + + +下面的代码展示了这个库的基本使用场景： + +```tsx +import React, { useEffect } from 'react'; +import { StyleSheet, View, Text } from 'react-native'; +import * as Progress from '@react-native-oh-tpl/react-native-progress'; + +const ProgressExample = () => { + const [progress, setProgress] = React.useState(0); + const [indeterminate, setIndeterminate] = React.useState(true); + + useEffect(() => { + let interval: ReturnType; + const timer = setTimeout(() => { + setIndeterminate(false); + interval = setInterval(() => { + setProgress((prevProgress) => { + if (prevProgress >= 1) { + return 0 + } + return Math.min(1, prevProgress + Math.random() / 5) + }); + }, 500); + }, 1500); + return () => { + clearTimeout(timer); + clearInterval(interval); + }; + }, []); + + return ( + + Progress Example + + + + + + + + + + + + ); +} +export default ProgressExample; + +const styles = StyleSheet.create({ + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + }, + bar: { + flexDirection: 'row', + justifyContent: 'center', + }, + circles: { + flexDirection: 'row', + justifyContent: 'center', + }, + progress: { + margin: 10, + }, +}); +``` + +## Link + +本库鸿蒙侧实现依赖@react-native-oh-tpl/react-native-svg 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。 + +如未引入请参照[@react-native-oh-tpl/react-native-svg 文档的 Link 章节](https://gitee.com/react-native-oh-library/usage-docs/blob/master/1224/react-native-svg.md#link)进行引入 + +## 兼容性 + +在以下版本验证通过 + 1. IDE:4.1.3.500; + SDK:4.1.0.57; + 测试设备：Mate60 (BAR-AL00); + Rom:2.0.0.59(SP2DEVC00E59R4P1); + RNOH:0.72.13。 + +## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!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 | +### `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 | + +### `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 | + +### `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 | + +### `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 | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [MIT License](https://github.com/oblador/react-native-progress/blob/master/LICENSE) ，请自由地享受和参与开源。 -- Gitee From 1de6c3ea83825a348cddc9fc8cdfee5a3c300844 Mon Sep 17 00:00:00 2001 From: zhukun Date: Tue, 30 Jan 2024 15:44:59 +0800 Subject: [PATCH 2/3] =?UTF-8?q?[Issues:=20#I8ZWAW]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-progress=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-progress.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/1224/react-native-progress.md b/1224/react-native-progress.md index b17e6637..c46bec05 100644 --- a/1224/react-native-progress.md +++ b/1224/react-native-progress.md @@ -1,14 +1,15 @@ > 模板版本：v0.1.2

-

react-native-action-button

+

react-native-progress

- + License

+ ## 安装与使用 进入到工程目录并输入以下命令： @@ -18,13 +19,13 @@ #### **yarn** ``` -yarn add @react-native-oh-tpl/react-native-progress@5.0.1-0.0.1 +yarn add @react-native-oh-tpl/react-native-progress ``` #### **npm** ```bash -npm install @react-native-oh-tpl/react-native-progress@5.0.1-0.0.1 +npm install @react-native-oh-tpl/react-native-progress ``` @@ -33,7 +34,7 @@ npm install @react-native-oh-tpl/react-native-progress@5.0.1-0.0.1 ```tsx import React, { useEffect } from 'react'; import { StyleSheet, View, Text } from 'react-native'; -import * as Progress from '@react-native-oh-tpl/react-native-progress'; +import * as Progress from 'react-native-progress'; const ProgressExample = () => { const [progress, setProgress] = React.useState(0); @@ -204,6 +205,8 @@ All of the props under *Properties* in addition to the following: ## 遗留问题 +Progress.Circle中的属性fill在鸿蒙上默认显示黑色和默认无色存在差异，定位是svg的属性配置有问题，当前通过修改Circle.js中默认fill的属性进行规避，后续svg修复该问题后，修改的代码会移除。 + ## 其他 ## 开源协议 -- Gitee From 0f176cfcaf6ae1f8d0c019fed7c3a197192077d3 Mon Sep 17 00:00:00 2001 From: zhukun Date: Tue, 30 Jan 2024 16:08:57 +0800 Subject: [PATCH 3/3] =?UTF-8?q?[Issues:=20#I8ZWAW]=20=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-progress=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-progress.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/1224/react-native-progress.md b/1224/react-native-progress.md index c46bec05..0089d906 100644 --- a/1224/react-native-progress.md +++ b/1224/react-native-progress.md @@ -205,7 +205,7 @@ All of the props under *Properties* in addition to the following: ## 遗留问题 -Progress.Circle中的属性fill在鸿蒙上默认显示黑色和默认无色存在差异，定位是svg的属性配置有问题，当前通过修改Circle.js中默认fill的属性进行规避，后续svg修复该问题后，修改的代码会移除。 +Progress.Circle中的属性fill在鸿蒙上默认显示黑色和默认无色不一致，定位是svg的属性配置有问题，当前通过修改Circle.js中默认fill的属性进行规避，后续svg修复该问题[issue#6](https://github.com/react-native-oh-library/react-native-svg/issues/6)后，修改的代码会移除。 ## 其他 -- Gitee