Skip to content

Commit a999876

Browse files
author
hy
committed
fix(Progress) 添加Progress进度条和进度圈组件，优化Progress组件和处理解决报错等问题
1 parent 6961193 commit a999876

File tree

3 files changed

+244
-70
lines changed

3 files changed

+244
-70
lines changed

‎example/examples/src/routes/Progress/index.tsx‎

Lines changed: 76 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
import React, { useState, useEffect } from 'react';
22
import { View, Text } from 'react-native';
3-
import { Progress, Button, Spacing } from '@uiw/react-native';
3+
import { Progress, Spacing, Button, Toast } from '@uiw/react-native';
44
import Layout, { Container } from '../../Layout';
5-
import { motorcycle } from './svg';
65

76
const { Header, Body, Card } = Layout;
87

@@ -11,31 +10,91 @@ const ProgressDemo = (props: any) => {
1110
const description = route.params.description;
1211
const title = route.params.title;
1312

14-
const [val, setValue] = useState<number>(0);
15-
const [automaticVal, setAutomaticVal] = useState<number>(0);
13+
const [val, setValue] = useState<number>(15);
14+
console.log('val', val);
1615

1716
const onPress = () => {
18-
let count = val + 5;
19-
if (count > 100) {
20-
count = 0;
17+
if (val < 100) {
18+
setValue(val + 5);
19+
} else {
20+
Toast.info('宝，别点了，要溢出了')
2121
}
22-
setValue(count);
2322
};
2423

2524
return (
2625
<Container>
2726
<Header title={title} description={description} />
2827
<Body style={{ paddingLeft: 16, paddingRight: 16 }}>
29-
<Header description={'基本使用'} />
30-
<Progress type='circle' />
31-
<Header description={'基本使用'} />
32-
<Progress type='circle' />
33-
<Header description={'展示进度图标'} />
34-
<Progress type='line' />
35-
<Header description={'改变进度图标'} />
36-
<Progress type='circle' />
28+
<Card title="基础实例">
29+
<Progress type='circle' />
30+
<Spacing />
31+
<Progress type='line' />
32+
</Card>
33+
<Card title="自定义值">
34+
<Progress type='circle' value={val} />
35+
<Spacing />
36+
<Progress type='line' value={val} />
37+
<Spacing />
38+
<Button onPress={() => onPress()} >你点我呀！</Button>
39+
</Card>
40+
<Card title="自定义渐变色">
41+
<Progress type='circle' color={['#FFD080', 'red']} />
42+
<Spacing />
43+
<Progress type='line' color={['#FFD080', 'red']} />
44+
</Card>
45+
<Card title="设置大小">
46+
<Progress type='circle' width={60} left='6.5%' />
47+
<Spacing />
48+
<Progress type='circle' width={80} left='8.5%' />
49+
<Spacing />
50+
<Progress type='line' width={60} />
51+
<Spacing />
52+
<Progress type='line' width={80} />
53+
</Card>
54+
<Card title="是否显示单位">
55+
<Progress type='circle' showUnit={false} left='12.5%' />
56+
<Spacing />
57+
<Progress type='line' showUnit={false} />
58+
</Card>
59+
<Card title="自定义单色">
60+
<Progress type='circle' color='#FFD080' />
61+
<Spacing />
62+
<Progress type='line' color='#FFD080' />
63+
</Card>
64+
<Card title="自定义背景色">
65+
<Progress type='circle' bgColor="#FFD080" value={5} />
66+
<Spacing />
67+
<Progress type='line' bgColor='#FFD080' value={70} />
68+
</Card>
69+
<Card title="设置外环宽度">
70+
<Progress type='circle' value={5} strokeWidth={25} />
71+
<Spacing />
72+
<Progress type='line' value={70} strokeWidth={15} />
73+
</Card>
74+
75+
<Card title="是否显示文本">
76+
<Progress type='circle' value={68} showLabel={false} />
77+
<Spacing />
78+
<Progress type='line' value={70} showLabel={false} />
79+
</Card>
80+
<Card title="自定义标签">
81+
<Progress type='circle' value={53} label={<Text>饕餮</Text>} />
82+
<Spacing />
83+
<Progress type='line' value={30} label={<Text>饕餮</Text>} />
84+
</Card>
85+
<Card title="设置外环宽度">
86+
<Progress type='circle' value={5} strokeWidth={25} />
87+
<Spacing />
88+
<Progress type='line' value={70} strokeWidth={15} />
89+
</Card>
90+
<Card title="自定义文本位置">
91+
<Progress type='circle' value={5} top="50%" left='50%' />
92+
<Spacing />
93+
<Progress type='line' value={70} top="-20%" left='50%' />
94+
</Card>
95+
<Spacing />
3796
</Body>
38-
</Container>
97+
</Container >
3998
);
4099
};
41100

‎packages/core/src/Progress/README.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,85 @@
11
Progress 进度条
22
---
33

4+
> **Progress 进度条组件在未来的版本参数已变更，请注意使用**
5+
46
表明某个任务的当前进度。
57

8+
**------------------------------------------------------------------------------新文档------------------------------------------------------------------------------**
9+
10+
### 基础示例
11+
12+
<!--DemoStart-->
13+
```jsx mdx:preview&background=#bebebe29
14+
import React from 'react';
15+
import { SafeAreaView } from 'react-native';
16+
import { Progress } from '@uiw/react-native';
17+
import { motorcycle } from './svg';
18+
19+
function Demo() {
20+
return (
21+
<SafeAreaView style={{ flex: 1 }}>
22+
<Progress type='circle' />
23+
</SafeAreaView>
24+
)
25+
}
26+
export default Demo
27+
```
28+
29+
### 自定义颜色
30+
31+
<!--DemoStart-->
32+
```jsx mdx:preview&background=#bebebe29
33+
import React from 'react';
34+
import { SafeAreaView } from 'react-native';
35+
import { Progress } from '@uiw/react-native';
36+
37+
function Demo() {
38+
return (
39+
<SafeAreaView style={{ flex: 1 }}>
40+
<Progress type='circle' color={['#FFD080', 'red']} />
41+
</SafeAreaView>
42+
)
43+
}
44+
export default Demo
45+
```
46+
### 自定义百分比,展示进度
47+
48+
<!--DemoStart-->
49+
```jsx mdx:preview&background=#bebebe29
50+
import React from 'react';
51+
import { SafeAreaView } from 'react-native';
52+
import { Progress } from '@uiw/react-native';
53+
54+
function Demo() {
55+
return (
56+
<SafeAreaView style={{ flex: 1 }}>
57+
<Progress type='circle' value={88} />
58+
<Progress type='circle' value={55} />
59+
</SafeAreaView>
60+
)
61+
}
62+
export default Demo
63+
```
64+
65+
### Props
66+
67+
| 参数 | 说明 | 类型 | 默认值 |
68+
|------|------|-----|------|
69+
| `type` | 设置进度圈还是进度条,`'line' or 'circle'` | string | 'circle' |
70+
| `width` |设置进度圈大小，进度条长度 | number | 100 |
71+
| `color` | 设置进度圈,进度条颜色 `string or [string, string]`| String | `['#3578e5', '#00c6ff']` |
72+
| `bgColor` | 设置背景颜色 | String | `'#e5e5e5'` |
73+
| `strokeWidth` | 设置进度圈外环宽度，进度条的高 | number | 10 |
74+
| `value` | 设置百分比的值 | number| 0 |
75+
| `showLabel` | 是否显示值文本 | boolean| true |
76+
| `label` | 自定义标签 | number | 10 |
77+
| `showUnit` | 是否显示单位 | boolean | true |
78+
| `top` | 自定义文本位置 | String | `'50%'` |
79+
| `left` | 自定义文本位置 | String | `'11%'` |
80+
81+
82+
**------------------------------------------------------------------------------老文档------------------------------------------------------------------------------**
683

784
### 基础示例
885

0 commit comments

Comments
 (0)