1+ import { has } from 'lodash' ;
12import React , { useRef , useState , useEffect } from 'react' ;
2- import { Animated , View , StyleSheet , ViewProps , LayoutChangeEvent } from 'react-native' ;
3+ import { Animated , View , StyleSheet , ViewProps , LayoutChangeEvent , Image } from 'react-native' ;
4+ import { Flex } from 'src' ;
5+ import { run } from './svg' ;
6+ import Icon from '../Icon' ;
37
48type PositionType = 'fixed' | 'relative' ;
59
@@ -13,11 +17,25 @@ export interface ProgressProps extends ViewProps {
1317 position ?: PositionType ;
1418 /** 动画持续的时间 */
1519 animation ?: { duration ?: number } | boolean ;
20+ /** 图标源 */
21+ xml ?: string ;
22+ /** 是否展示图标 */
23+ iconShow ?: boolean | false ;
24+ /** 图标尺寸 */
25+ size ?: number ;
1626}
1727
1828export default ( props : ProgressProps ) => {
19- const { style, progress = 0 , progressColor = '#108ee9' , position, animation = { duration : 500 } } = props ;
20-
29+ const {
30+ iconShow,
31+ size = 25 ,
32+ xml = run ,
33+ style,
34+ progress = 0 ,
35+ progressColor = '#108ee9' ,
36+ position,
37+ animation = { duration : 500 } ,
38+ } = props ;
2139 const progWidth = useRef < any > ( new Animated . Value ( 0 ) ) . current ;
2240 const [ wrapWidth , setWrapWidth ] = useState < number > ( 0 ) ;
2341
@@ -48,6 +66,7 @@ export default (props: ProgressProps) => {
4866 }
4967 return widthPercent ;
5068 } ;
69+ console . log ( 'wrapWidth' , wrapWidth ) ;
5170
5271 return (
5372 < View style = { [ styles . container , style ] } >
@@ -69,6 +88,17 @@ export default (props: ProgressProps) => {
6988 ] }
7089 > </ Animated . View >
7190 </ View >
91+ { iconShow && iconShow === true && (
92+ < View onLayout = { onLayout } style = { [ styles . preIcon , { height : size } ] } >
93+ < Animated . View
94+ style = { {
95+ marginLeft : progress === 0 ? - 50 : - 35 ,
96+ width : progWidth ,
97+ } }
98+ > </ Animated . View >
99+ < Icon xml = { xml } size = { size } />
100+ </ View >
101+ ) }
72102 </ View >
73103 ) ;
74104} ;
@@ -87,6 +117,12 @@ const styles = StyleSheet.create({
87117 marginTop : 0 ,
88118 overflow : 'hidden' ,
89119 } ,
120+ preIcon : {
121+ width : '100%' ,
122+ overflow : 'hidden' ,
123+ flexDirection : 'row' ,
124+ paddingHorizontal : 20 ,
125+ } ,
90126 preOisn : {
91127 position : 'absolute' ,
92128 height : 4 ,
0 commit comments