react-native-percentage-circle
react-native-percentage-circle copied to clipboard
JackPu
Values lower than 50% not displayed correctly
$ yarn add react-native-percentage-circle yarn add v0.21.3 [1/4] Resolving packages... [2/4] Fetching packages... [3/4] Linking dependencies... [4/4] Building fresh packages... success Saved lockfile. success Saved 1 new dependency. └─ [email protected] Done in 9.65s.
@JackPu 我貌似也碰到了同样的问题
版本：
"react-native": "0.41.2"
"react-native-percentage-circle": "^1.0.6"
@huangxiaohao : I tried to fix it, but did not get it managed - also being busy on other stuff...
@zash80 OK, It does not matter ,the author was already know this issue, we waited for him to fix this issue.
@AdityaAgg I am trying to fixed it soon. Last week i don't have enough time to debug this issue. But this week I'll have some free time. 💐
@huangxiaohao @Yincongxiao @AdityaAgg 请提供下你的测试设备机型，我试过了Nexus 模拟器和 自己的华为手机的没有出现过这个bug,希望你们能留言下你们测试的机型？ 😝
iOS模拟器和iPhone真机均有问题。具体的图片我在上面的提问上面有截图，你可以看看。 不过因为项目原因，我今天换了一个其他的组件来解决这个问题。
https://facebook.github.io/react-native/docs/view.html#collapsable
leftWrap View should add collapsable={false}
collapsable?:
boolViews that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.
render() {
const {disabled,disabledText,radius,bgColor,color,percent,innerColor="#fef7ea"}=this.props
const {leftTransformerDegree,rightTransformerDegree,borderWidth,textStyle}=this.state
if (disabled) {
return (
<View style={[styles.circle,{
width:radius*2,
height: radius*2,
borderRadius:radius
}]}>
<Text style={styles.text}>{disabledText}</Text>
</View>
);
}
return (
<View style={[styles.circle,{
width:radius*2,
height: radius*2,
borderRadius:radius,
backgroundColor: bgColor
}]}>
<View collapsable={false} style={[styles.leftWrap,{
width: radius,
height: radius * 2,
left:0,
}]}>
<View style={[styles.loader,{
left: radius,
width:radius,
height: radius*2,
borderTopLeftRadius:0,
borderBottomLeftRadius:0,
backgroundColor:color,
transform:[{translateX:-radius/2},{rotate:leftTransformerDegree},{translateX:radius/2}],
}]}></View>
</View>
<View collapsable={false} style={[styles.leftWrap,{
left:radius,
width: radius,
height: radius * 2,
}]}>
<View style={[styles.loader,{
left:-radius,
width:radius,
height: radius*2,
borderTopRightRadius:0,
borderBottomRightRadius:0,
backgroundColor: color,
transform:[{translateX:radius/2},{rotate:rightTransformerDegree},{translateX:-radius/2}],
}]}></View>
</View>
<View style={[styles.innerCircle,{
width:(radius - borderWidth)*2,
height:(radius - borderWidth)*2,
borderRadius:radius - borderWidth,
backgroundColor: innerColor,
}]}>
{this.props.children ? this.props.children :
<Text style={[styles.text, textStyle]}>{percent}%</Text>}
</View>
</View>
);
}
Hey everyone, I encountered the same issue. I fixed it like (line 95):
componentWillReceiveProps(nextProps) {
let percent = nextProps.percent;
let leftTransformerDegree = '0deg';
let rightTransformerDegree = '0deg';
if (percent >= 50) {
rightTransformerDegree = '180deg';
leftTransformerDegree = (percent - 50) * 3.6 + 'deg';
} else {
// Remove these 2 lines :
// rightTransformerDegree = '0deg';
// leftTransformerDegree = -(50 - percent) * 3.6 + 'deg';
// and add :
rightTransformerDegree = percent * 3.6 + 'deg';
}
// ...
Hope it helps
Kevin
@SeanLine I have published a new version and fix the bug through the code by @checkitoutteam. I have tested it on both ios and android devices.
@JackPu, the fix looks good - thanks! also thanks @checkitoutteam for providing the solution...
i have solved the issue,you need change these codes:
#line 11 import Platform
#line 96 // rightTransformerDegree = '0deg'; // leftTransformerDegree = -(50-percent) * 3.6 + 'deg';
if (Platform.OS == 'ios') { leftTransformerDegree = '0deg'; rightTransformerDegree = percent * 3.6 + 'deg'; }else{ leftTransformerDegree = '0deg'; rightTransformerDegree = -(50-percent) * 3.6 + 'deg'; }
#line 157 //backgroundColor: this.props.percent < 50 ? this.props.bgcolor : this.props.color,
backgroundColor: Platform.OS == 'ios' ? this.props.color : this.props.percent < 50 ? this.props.bgcolor : this.props.color,
line number maybe is wrong，just search the code :)
