react-native-oh-library / react-native-svg

react-native-svg
MIT License
0 stars 4 forks source link

Progress.Circle中的属性color, unfilledColor,borderWith,borderColor的属性,在进行静态配置的时候颜色显示正常,在使用Button进行动态改变的时候,中间的圆会显示黑色和默认的颜色不一致 #7

Open 1032415214 opened 9 months ago

1032415214 commented 9 months ago

const [borderColor, setBorderColor] = React.useState('red'); const borderColorCounter = () => { setBorderColor(count => { if (count == 'red') { return 'green'; } if (count == 'green') { return 'blue'; } if (count == 'blue') { return 'yellow'; } if (count == 'yellow') { return 'red'; } return 'red' }); };

  <Text style={styles.welcome}>Progress Circle color</Text>
  <View style={styles.circles}>
    <Progress.Circle
      style={styles.progress}
      borderWidth={5}
    />
    <Progress.Circle
      style={styles.progress}
      borderWidth={5}
      color={'red'}
    />
    <Progress.Circle
      style={styles.progress}
      borderWidth={5}
      color={'yellow'}
    />
    <Progress.Circle
      style={styles.progress}
      borderWidth={5}
      color={color}
    />                
    <Button
      title="Press me!"
      onPress={colorCounter}
    />
  </View> 

color, unfilledColor,borderWith,borderColor的属性在进行直接配置的时候如:color={‘red’}显示正常,但是在通过button进行动态配置的时候中间的圆会显示黑色和默认的颜色不一致,需要定位修改,具体可以参考demo:https://github.com/react-native-oh-library/RNOHDCS/blob/main/progressDemo/progressCircle.tsx