暫無描述

CusProgressBar.js 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168
  1. import React,{Component}from 'react';
  2. import {
  3. View,
  4. StyleSheet,
  5. Animated,
  6. Easing
  7. }from 'react-native';
  8. import PropTypes from "prop-types"
  9. export default class CusProgressBar extends Component {
  10. static propTypes = {
  11. ...View.propTypes,
  12. //当前进度
  13. progress: PropTypes.number,
  14. //second progress进度
  15. buffer: PropTypes.number,
  16. //进度条颜色
  17. progressColor: PropTypes.string,
  18. //buffer进度条颜色
  19. bufferColor: PropTypes.string,
  20. //进度动画时长
  21. progressAniDuration: PropTypes.number,
  22. //buffer动画时长
  23. bufferAniDuration: PropTypes.number
  24. }
  25. static defaultProps = {
  26. //进度条颜色
  27. progressColor: 'red',
  28. //buffer进度条颜色
  29. bufferColor: 'rgba(255,0,0,0.7)',
  30. //进度条动画时长
  31. progressAniDuration: 300,
  32. //buffer进度条动画时长
  33. bufferAniDuration: 300
  34. }
  35. // 构造
  36. constructor(props) {
  37. super(props);
  38. this._progressAni = new Animated.Value(0);
  39. this._bufferAni = new Animated.Value(0);
  40. }
  41. componentWillReceiveProps(nextProps) {
  42. this._progress = nextProps.progress;
  43. this._buffer = nextProps.buffer;
  44. }
  45. componentWillMount() {
  46. this._progress = this.props.progress;
  47. this._buffer = this.props.buffer;
  48. }
  49. render() {
  50. return (
  51. <View
  52. style={[styles.container,this.props.style]}
  53. onLayout={this._onLayout.bind(this)}
  54. >
  55. <Animated.View
  56. ref="progress"
  57. style={{
  58. position:'absolute',
  59. width:this._progressAni,
  60. backgroundColor:this.props.progressColor
  61. }}
  62. />
  63. <Animated.View
  64. ref="buffer"
  65. style={{
  66. position:'absolute',
  67. width:this._bufferAni,
  68. backgroundColor:this.props.bufferColor
  69. }}
  70. />
  71. </View>
  72. );
  73. }
  74. _onLayout({nativeEvent:{layout:{width,height}}}) {
  75. //防止多次调用,当第一次获取后,后面就不再去获取了
  76. if (width > 0 && this.totalWidth !== width) {
  77. //获取progress控件引用
  78. let progress = this._getProgress();
  79. //获取buffer控件引用
  80. let buffer = this._getBuffer();
  81. //获取父布局宽度
  82. this.totalWidth = width;
  83. //给progress控件设置高度
  84. progress.setNativeProps({
  85. style: {
  86. height: height
  87. }
  88. });
  89. //给buffer控件设置高度
  90. buffer.setNativeProps({
  91. style: {
  92. height: height
  93. }
  94. });
  95. //开始执行进度条动画
  96. this._startAniProgress(this.progress);
  97. //开始执行buffer动画
  98. this._startAniBuffer(this.buffer);
  99. }
  100. }
  101. _startAniProgress(progress) {
  102. if (this._progress >= 0 && this.totalWidth != 0) {
  103. Animated.timing(this._progressAni, {
  104. toValue: progress * this.totalWidth,
  105. duration: this.props.progressAniDuration,
  106. easing: Easing.linear
  107. }).start();
  108. }
  109. }
  110. _startAniBuffer(buffer) {
  111. if (this._buffer >= 0 && this.totalWidth != 0) {
  112. Animated.timing(this._bufferAni, {
  113. toValue: buffer * this.totalWidth,
  114. duration: this.props.bufferAniDuration,
  115. }).start();
  116. }
  117. }
  118. _getProgress() {
  119. if (typeof this.refs.progress.refs.node !== 'undefined') {
  120. return this.refs.progress.refs.node;
  121. }
  122. return this.refs.progress._component;
  123. }
  124. _getBuffer() {
  125. if (typeof this.refs.buffer.refs.node !== 'undefined') {
  126. return this.refs.buffer.refs.node;
  127. }
  128. return this.refs.buffer._component;
  129. }
  130. }
  131. Object.defineProperty(CusProgressBar.prototype, 'progress', {
  132. set(value){
  133. if (value >= 0 && this._progress != value) {
  134. this._progress = value;
  135. this._startAniProgress(value);
  136. }
  137. },
  138. get() {
  139. return this._progress;
  140. },
  141. enumerable: true,
  142. });
  143. Object.defineProperty(CusProgressBar.prototype, 'buffer', {
  144. set(value){
  145. if (value >= 0 && this._buffer != value) {
  146. this._buffer = value;
  147. this._startAniBuffer(value);
  148. }
  149. },
  150. get() {
  151. return this._buffer;
  152. },
  153. enumerable: true,
  154. });
  155. const styles = StyleSheet.create({
  156. container: {
  157. height: 4,
  158. backgroundColor: '#9c9c9c'
  159. }
  160. });