Skip to content

Commit 5841927

Browse files
huyihuyi
huyi
authored and
huyi
committed
fix:(Progress)优化Progress进度条&进度圈组件，升级react-native-svg依赖到13.0.0
1 parent c3c0027 commit 5841927

File tree

8 files changed

+39
-77
lines changed

8 files changed

+39
-77
lines changed

‎example/base/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414
"react-native": "0.69.7",
1515
"@uiw/react-native": "3.2.3",
1616
"@uiw/react-native-image-picker": "3.2.3",
17-
"react-native-svg": "12.1.1",
17+
"react-native-svg": "13.0.0",
1818
"react-native-gesture-handler": "2.8.0",
1919
"react-native-root-siblings": "4.1.1",
20-
"react-native-image-picker":"^5.3.1",
21-
"react-native-image-viewing":"~0.2.2",
22-
"@react-native-camera-roll/camera-roll":"5.3.1"
20+
"react-native-image-picker": "^5.3.1",
21+
"react-native-image-viewing": "~0.2.2",
22+
"@react-native-camera-roll/camera-roll": "5.3.1"
2323
},
2424
"devDependencies": {
2525
"@babel/core": "~7.20.7",

‎example/examples/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@
1919
"react-native-gesture-handler": "~2.5.0",
2020
"react-native-safe-area-context": "~4.3.1",
2121
"react-native-screens": "~3.15.0",
22-
"react-native-svg": "12.1.1",
23-
"react-native-image-picker":"^5.3.1",
24-
"react-native-image-viewing":"~0.2.2",
22+
"react-native-svg": "13.0.0",
23+
"react-native-image-picker": "^5.3.1",
24+
"react-native-image-viewing": "~0.2.2",
2525
"@uiw/react-native-image-picker": "3.2.3",
26-
"@react-native-camera-roll/camera-roll":"5.3.1"
26+
"@react-native-camera-roll/camera-roll": "5.3.1"
2727
},
2828
"devDependencies": {
2929
"@babel/core": "~7.20.7",

‎packages/core/package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -58,14 +58,14 @@
5858
"@uiw/icons": "2.5.3",
5959
"@validator.tool/hook": "2.2.4",
6060
"ahooks": "3.7.6",
61-
"dayjs":"~1.11.7",
61+
"dayjs": "~1.11.7",
6262
"color": "4.2.3",
6363
"lodash": "4.17.21",
6464
"prop-types": "15.7.2",
6565
"react-native-gesture-handler": "2.8.0",
6666
"react-native-root-siblings": "4.1.1",
67-
"react-native-svg": "12.1.1",
68-
"@shopify/restyle":"~2.4.2"
67+
"react-native-svg": "13.0.0",
68+
"@shopify/restyle": "~2.4.2"
6969
},
7070
"peerDependencies": {
7171
"react": ">=16.9.0",

‎packages/core/src/Progress/index.tsx‎

Lines changed: 18 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ const Progress: React.FC<ProgressProps> = ({
3535
showLabel = true,
3636
label,
3737
showUnit = true,
38-
top = "50%",
39-
left = "11%",
38+
top = '50%',
39+
left = '11%',
4040
}) => {
4141
const progressValue = useRef(new Animated.Value(0)).current;
4242

@@ -69,49 +69,32 @@ const Progress: React.FC<ProgressProps> = ({
6969
position: 'absolute',
7070
top: top,
7171
left: left,
72-
transform: [
73-
{ translateX: 0 },
74-
{ translateY: 0 },
75-
],
72+
transform: [{ translateX: 0 }, { translateY: 0 }],
7673
fontSize: fontSize,
7774
fontWeight: 'bold',
7875
color: typeof color === 'string' ? color : color[1],
79-
}}>
76+
}}
77+
>
8078
{label ?? `${value}${showUnit ? '%' : ''}`}
81-
</Text >
79+
</Text>
8280
);
8381

8482
return (
8583
<View>
86-
<Svg width={width} height={width / 3} >
84+
<Svg width={width} height={width / 3}>
8785
<Defs>
88-
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0" >
86+
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
8987
<Stop offset="0" stopColor={typeof color === 'string' ? color : color[0]} stopOpacity="1" />
9088
<Stop offset="1" stopColor={typeof color === 'string' ? color : color[1]} stopOpacity="1" />
9189
</LinearGradient>
9290
</Defs>
9391
<G origin={`${width / 2}, ${width / 2}`}>
94-
<Rect
95-
x={0}
96-
y={0}
97-
width={width}
98-
height={strokeWidth}
99-
rx={strokeWidth / 2}
100-
fill={bgColor}
101-
/>
102-
<AnimatedRect
103-
x={0}
104-
y={0}
105-
width={progress}
106-
height={strokeWidth}
107-
rx={strokeWidth / 2}
108-
fill="url(#grad)"
109-
>
110-
</AnimatedRect>
92+
<Rect x={0} y={0} width={width} height={strokeWidth} rx={strokeWidth / 2} fill={bgColor} />
93+
<AnimatedRect x={0} y={0} width={progress} height={strokeWidth} rx={strokeWidth / 2} fill="url(#grad)" />
11194
</G>
11295
</Svg>
11396
{progressLabel}
114-
</View >
97+
</View>
11598
);
11699
} else if (type === 'circle') {
117100
const radius = (width - strokeWidth) / 2;
@@ -135,14 +118,14 @@ const Progress: React.FC<ProgressProps> = ({
135118
fontSize: fontSize,
136119
fontWeight: 'bold',
137120
color: typeof color === 'string' ? color : color[1],
138-
}
139-
}>
121+
}}
122+
>
140123
{label ?? `${value}${showUnit ? '%' : ''}`}
141-
</Text >
124+
</Text>
142125
);
143126

144127
return (
145-
<View >
128+
<View>
146129
<Svg width={width} height={width}>
147130
<Defs>
148131
<LinearGradient id="grad" x1="0" y1="0" x2="1" y2="0">
@@ -151,14 +134,7 @@ const Progress: React.FC<ProgressProps> = ({
151134
</LinearGradient>
152135
</Defs>
153136
<G rotation="-90" origin={`${width / 2}, ${width / 2}`}>
154-
<Circle
155-
cx={width / 2}
156-
cy={width / 2}
157-
r={radius}
158-
stroke={bgColor}
159-
strokeWidth={strokeWidth}
160-
fill="none"
161-
/>
137+
<Circle cx={width / 2} cy={width / 2} r={radius} stroke={bgColor} strokeWidth={strokeWidth} fill="none" />
162138
<AnimatedCircle
163139
cx={width / 2}
164140
cy={width / 2}
@@ -175,6 +151,8 @@ const Progress: React.FC<ProgressProps> = ({
175151
{progressLabel}
176152
</View>
177153
);
154+
} else {
155+
return null;
178156
}
179157
};
180158

‎packages/react-native-image-picker/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -27,18 +27,18 @@
2727
"prop-types": "15.7.2",
2828
"@uiw/icons": "2.5.3",
2929
"ahooks": "3.7.6",
30-
"@shopify/restyle":"~2.4.2",
31-
"@uiw/react-native":"~3.2.3",
32-
"react-native-svg": "12.1.1",
33-
"react-native-image-picker":"^5.3.1",
34-
"react-native-image-viewing":"~0.2.2",
35-
"@react-native-camera-roll/camera-roll":"5.3.1"
30+
"@shopify/restyle": "~2.4.2",
31+
"@uiw/react-native": "~3.2.3",
32+
"react-native-svg": "13.0.0",
33+
"react-native-image-picker": "^5.3.1",
34+
"react-native-image-viewing": "~0.2.2",
35+
"@react-native-camera-roll/camera-roll": "5.3.1"
3636
},
3737
"peerDependencies": {
3838
"react": ">=16.9.0",
3939
"react-native": ">=0.60.0",
4040
"react-native-svg": ">=9.9.3",
41-
"react-native-image-picker":">= 5.0.0"
41+
"react-native-image-picker": ">= 5.0.0"
4242
},
4343
"devDependencies": {
4444
"@babel/core": "~7.20.7",

‎test-ci/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141
"prop-types": "15.7.2",
4242
"react-native-gesture-handler": "2.8.0",
4343
"react-native-root-siblings": "4.1.1",
44-
"react-native-svg": "12.1.1",
45-
"@shopify/restyle":"~2.4.2"
44+
"react-native-svg": "13.0.0",
45+
"@shopify/restyle": "~2.4.2"
4646
},
4747
"jest": {
4848
"setupFiles": [

‎test-ci/src/__tests__/progress.tsx‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎website/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434
"react-native-gesture-handler": "2.8.0",
3535
"react-native-reanimated": "~2.13.0",
3636
"react-native-root-siblings": "4.1.1",
37-
"react-native-svg": "12.1.1",
37+
"react-native-svg": "13.0.0",
3838
"react-native-web": "0.18.10",
3939
"react-router-dom": "6.2.1",
4040
"styled-components": "^5.3.6",

0 commit comments

Comments
 (0)