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