资讯专栏INFORMATION COLUMN

对react-native-percentage-circle修改,实现圆环旋转一定角度

lauren_liuling / 2171人阅读

摘要:最近在项目中要用到组件实现进度条和画圆环。最后,本人决定是否可以通过修改源码实现旋转效果,对组件的研究发现可以对组件加上一个属性,实现圆环旋转效果。最后附上本人在上的的评论,以及代码定义旋转角度初始化值初始化值

最近在项目中要用到[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 (
        
          {this.props.disabledText}
        
      );
    }
    return (
      
        
          
        
        
          
        
        
          {this.props.children ? this.props.children :
            {this.props.percent}%}
        

      
    );
  }
}

// set some attributes default value
PercentageCircle.defaultProps = {
  bgcolor: "#e3e3e3",
  innerColor: "#fff"
};

module.exports = PercentageCircle;

s://github.com/JackPu/react-native-percentage-circle

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112912.html

相关文章

  • react-native-percentage-circle修改实现圆环旋转一定角度

    摘要:最近在项目中要用到组件实现进度条和画圆环。最后,本人决定是否可以通过修改源码实现旋转效果,对组件的研究发现可以对组件加上一个属性,实现圆环旋转效果。最后附上本人在上的的评论,以及代码定义旋转角度初始化值初始化值 最近在项目中要用到[react-native-percentage-circle][1]组件实现进度条和画圆环。UI界面要实现如下效果 showImg(https://segm...

    SimonMa 评论0 收藏0
  • JS仿《阿丽塔》中依德医生的旋转缩放控件 — DEMO篇

    摘要:前言前些天看了阿丽塔感叹酷炫特效的同时,不得不说这个片子灰常之热血重新点燃了我粪斗的基情有那么几个瞬间仿佛自己回到了,下面进入正题在依德医生刚捡回阿丽塔的那一段,有木有发现医生家的设备都很有意思比如那个人皮缝纫机,其灵活程度堪比织网的蜘蛛说 前言 前些天看了《阿丽塔》感叹酷炫特效的同时,不得不说这个片子灰常之热血!重新点燃了我粪斗的基情!!有那么几个瞬间仿佛自己回到了…… showIm...

    liangzai_cool 评论0 收藏0
  • JS仿《阿丽塔》中依德医生的旋转缩放控件 — DEMO篇

    摘要:前言前些天看了阿丽塔感叹酷炫特效的同时,不得不说这个片子灰常之热血重新点燃了我粪斗的基情有那么几个瞬间仿佛自己回到了,下面进入正题在依德医生刚捡回阿丽塔的那一段,有木有发现医生家的设备都很有意思比如那个人皮缝纫机,其灵活程度堪比织网的蜘蛛说 前言 前些天看了《阿丽塔》感叹酷炫特效的同时,不得不说这个片子灰常之热血!重新点燃了我粪斗的基情!!有那么几个瞬间仿佛自己回到了…… showIm...

    douzifly 评论0 收藏0
  • 使用React Native制作圆形加载条

    摘要:前端常规制作进度条方法前端实现相对容易点,我们可以用去绘制圆,也可以用去绘制使用主要是用进行绘制,关于使用可以看这里。 showImg(https://segmentfault.com/img/bVCkNJ); 先放运行截图说明做什么吧, showImg(https://segmentfault.com/img/bVCkND); react-native-percentage-circ...

    xiongzenghui 评论0 收藏0
  • clip实现圆环进度条

    摘要:效果图怎么实现这样一个圆环进度条的效果呢,可以使用等等方式,今天我们来说下使用怎么来实现。使用才实现圆环进度还是很简单的,还不需要考虑兼容性,关于可以看张鑫旭大神的日志 效果图 showImg(https://segmentfault.com/img/bV3DbY?w=315&h=300); 怎么实现这样一个圆环进度条的效果呢,可以使用canvas、svg、GIF等等方式,今天我们来说...

    zhichangterry 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<