This repository was archived by the owner on Mar 20, 2025. It is now read-only.
Description 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
Reactions are currently unavailable
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