摘要:最近在項目中要用到組件實現進度條和畫圓環。最后,本人決定是否可以通過修改源碼實現旋轉效果,對組件的研究發現可以對組件加上一個屬性,實現圓環旋轉效果。最后附上本人在上的的評論,以及代碼定義旋轉角度初始化值初始化值
最近在項目中要用到[react-native-percentage-circle][1]組件實現進度條和畫圓環。UI界面要實現如下效果
可以看出要實現兩個圓環嵌套,實現同心圓還是比較簡單的,react-native-percentage-circle組件支持子元素,所以,在外面圓環里面嵌套一個同心圓環,然后設置樣式就行了。具體代碼如下:
1990筆
然而要實現里面圓環旋轉就有點難度了,首先目前該組件最新版本v1.0.6并不支持直接旋轉
因此,首先我們想到可能要用的transform來實現,但實踐發現有各種問題。最后,本人決定是否可以通過修改源碼實現旋轉效果,對組件的index.js研究發現可以對組件加上一個props屬性rotate,實現圓環旋轉效果。
第一步:在PercentageCircle類propTypes中添加一個rotate屬性。
第二步:在constructor中定義一個新的變量rotate。
第三步:對if進行修改,要同時修改constructor函數和componentWillReceiveProps()函數
NOTE:這里rotate本人未設定值范圍,但建議0-50,如果大于50,失去了意義,可以通過背景顏色改變,大家在代碼中可以自己設定rotate的取值范圍。
最后附上本人在git上的Issues的評論,以及index.js代碼
/** React Native Percentage Circle ** @github https://github.com/JackPu/react-native-percentage-circle ** React Native Version >=0.25 ** to fixed react native version **/ import React, { Component } from "react"; import { StyleSheet, View, Text, } from "react-native"; const styles = StyleSheet.create({ circle: { overflow: "hidden", position: "relative", justifyContent: "center", alignItems: "center", backgroundColor: "#e3e3e3", }, leftWrap: { overflow: "hidden", position: "absolute", top: 0, }, rightWrap: { position: "absolute", }, loader: { position: "absolute", left: 0, top: 0, borderRadius: 1000, }, innerCircle: { overflow: "hidden", position: "relative", justifyContent: "center", alignItems: "center", }, text: { fontSize: 11, color: "#888", }, }); class PercentageCircle extends Component { propTypes: { color: React.PropTypes.string, bgcolor: React.PropTypes.string, innerColor: React.PropTypes.string, radius: React.PropTypes.number, percent: React.PropTypes.number, borderWidth: React.Proptypes.number, textStyle: React.Proptypes.array, disabled: React.PropTypes.bool, rotate: React.Proptypes.number, //定義旋轉角度 } constructor(props) { super(props); let percent = this.props.percent; let leftTransformerDegree = "0deg"; let rightTransformerDegree = "0deg"; //初始化值 let rotate = this.props.rotate; if (typeof rotate == "undefined") { rotate = 0; } if (percent >= 50) { //rightTransformerDegree = "180deg"; //leftTransformerDegree = (percent - 50) * 3.6 + "deg"; rightTransformerDegree = 180 + rotate * 3.6 + "deg"; leftTransformerDegree = (percent + rotate - 50) * 3.6 + "deg"; } else { //rightTransformerDegree = percent * 3.6 + "deg"; rightTransformerDegree = (percent + rotate - 50) * 3.6 + "deg"; leftTransformerDegree = rotate * 3.6 + "deg"; } this.state = { percent: this.props.percent, borderWidth: this.props.borderWidth < 2 || !this.props.borderWidth ? 2 : this.props.borderWidth, leftTransformerDegree: leftTransformerDegree, rightTransformerDegree: rightTransformerDegree, textStyle: this.props.textStyle ? this.props.textStyle : null }; } componentWillReceiveProps(nextProps) { let percent = nextProps.percent; let leftTransformerDegree = "0deg"; let rightTransformerDegree = "0deg"; /* if (percent >= 50) { rightTransformerDegree = "180deg"; leftTransformerDegree = (percent - 50) * 3.6 + "deg"; } else { rightTransformerDegree = "0deg"; leftTransformerDegree = -(50 - percent) * 3.6 + "deg"; } */ //初始化值 let rotate = this.props.rotate; if (typeof rotate == "undefined") { rotate = 0; } if (percent >= 50) { //rightTransformerDegree = "180deg"; //leftTransformerDegree = (percent - 50) * 3.6 + "deg"; rightTransformerDegree = 180 + rotate * 3.6 + "deg"; leftTransformerDegree = (percent + rotate - 50) * 3.6 + "deg"; } else { //rightTransformerDegree = percent * 3.6 + "deg"; rightTransformerDegree = (percent + rotate - 50) * 3.6 + "deg"; leftTransformerDegree = rotate * 3.6 + "deg"; } this.setState({ percent: this.props.percent, borderWidth: this.props.borderWidth < 2 || !this.props.borderWidth ? 2 : this.props.borderWidth, leftTransformerDegree: leftTransformerDegree, rightTransformerDegree: rightTransformerDegree }); } render() { if (this.props.disabled) { return (); } return ( {this.props.disabledText} ); } } // set some attributes default value PercentageCircle.defaultProps = { bgcolor: "#e3e3e3", innerColor: "#fff" }; module.exports = PercentageCircle; {this.props.children ? this.props.children : {this.props.percent}% }
s://github.com/JackPu/react-native-percentage-circle
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/92226.html
摘要:最近在項目中要用到組件實現進度條和畫圓環。最后,本人決定是否可以通過修改源碼實現旋轉效果,對組件的研究發現可以對組件加上一個屬性,實現圓環旋轉效果。最后附上本人在上的的評論,以及代碼定義旋轉角度初始化值初始化值 最近在項目中要用到[react-native-percentage-circle][1]組件實現進度條和畫圓環。UI界面要實現如下效果 showImg(https://segm...
摘要:前言前些天看了阿麗塔感嘆酷炫特效的同時,不得不說這個片子灰常之熱血重新點燃了我糞斗的基情有那么幾個瞬間仿佛自己回到了,下面進入正題在依德醫生剛撿回阿麗塔的那一段,有木有發現醫生家的設備都很有意思比如那個人皮縫紉機,其靈活程度堪比織網的蜘蛛說 前言 前些天看了《阿麗塔》感嘆酷炫特效的同時,不得不說這個片子灰常之熱血!重新點燃了我糞斗的基情!!有那么幾個瞬間仿佛自己回到了…… showIm...
摘要:前言前些天看了阿麗塔感嘆酷炫特效的同時,不得不說這個片子灰常之熱血重新點燃了我糞斗的基情有那么幾個瞬間仿佛自己回到了,下面進入正題在依德醫生剛撿回阿麗塔的那一段,有木有發現醫生家的設備都很有意思比如那個人皮縫紉機,其靈活程度堪比織網的蜘蛛說 前言 前些天看了《阿麗塔》感嘆酷炫特效的同時,不得不說這個片子灰常之熱血!重新點燃了我糞斗的基情!!有那么幾個瞬間仿佛自己回到了…… showIm...
摘要:前端常規制作進度條方法前端實現相對容易點,我們可以用去繪制圓,也可以用去繪制使用主要是用進行繪制,關于使用可以看這里。 showImg(https://segmentfault.com/img/bVCkNJ); 先放運行截圖說明做什么吧, showImg(https://segmentfault.com/img/bVCkND); react-native-percentage-circ...
摘要:效果圖怎么實現這樣一個圓環進度條的效果呢,可以使用等等方式,今天我們來說下使用怎么來實現。使用才實現圓環進度還是很簡單的,還不需要考慮兼容性,關于可以看張鑫旭大神的日志 效果圖 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么實現這樣一個圓環進度條的效果呢,可以使用canvas、svg、GIF等等方式,今天我們來說...
閱讀 3214·2023-04-25 18:43
閱讀 892·2021-11-24 09:39
閱讀 1361·2021-10-14 09:43
閱讀 3890·2021-09-22 15:58
閱讀 1899·2019-08-29 17:18
閱讀 410·2019-08-29 14:14
閱讀 3078·2019-08-29 13:01
閱讀 1615·2019-08-29 12:33