Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use react native to achieve arc drag progress bar", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use react native to achieve arc drag progress bar" article.

Put up the effect picture first

Because the requirements need to implement the non-native implementation of this rendering.

Difficulty 1: use svg to draw

Difficulty 2: the handling of click events

Difficulty 3: encapsulation

Due to the need for drawing using svg

Here Baidu teaches according to svg and api.

View code block

Render () {return (/ / actual ring {this._renderCircleSvg ()} / calculate the center distance / / interface exposed to the center of the externally rendered ring {this.props.renderCenterView (this.state.temp)}); _ renderCircleSvg () {/ / center point const cx = this.props.width / 2; const cy = this.props.height / 2 / / to calculate whether there is a deviation angle, the corresponding graph is const prad = this.props.angle / 2 * (Math.PI / 180); / / the starting point of triangulation const startX =-(Math.sin (prad) * this.props.r) + cx; const startY = cy + Math.cos (prad) * this.props.r; / / end point const endX = Math.sin (prad) * this.props.r + cx Const endY = cy + Math.cos (prad) * this.props.r; / / calculation progress point const progress = parseInt (this._circlerate () * (360-this.props.angle) / 100,10); / / hard high school math forgotten according to the quadrant, refer to the auxiliary line const t = progress + this.props.angle / 2; const progressX = cx-Math.sin (t * (Math.PI / 180)) * this.props.r The description of const progressY = cy + Math.cos (t * (Math.PI / 180)) * this.props.r;// SVG can be found here in Baidu. Const descriptions = ['M é mon, startX, startY,'A', this.props.r, this.props.r, 0, 1, 1, endX, endY,] .join ('') Const progressdescription = ['progressX, startX, startY,' Aids, this.props.r, this.props.r, 0, / / depending on whether the angle is 0 this.props.angle / 2? 1: 0 this.props.angle 1, progressX, progressY,] .join (''); return ();}}

Event handling code block

/ refer to iniPanResponder () {this.parseToDeg = this.parseToDeg.bind (this) on react native's official website; this._panResponder = PanResponder.create ({/ / request responder: onStartShouldSetPanResponder: () = > true, onStartShouldSetPanResponderCapture: () = > true, onMoveShouldSetPanResponder: () = > true, onMoveShouldSetPanResponderCapture: () = > true, onPanResponderGrant: evt = > {/ / start gesture operation. Give users some visual feedback to let them know what's going on! If (this.props.enTouch) {this.lastTemper = this.state.temp; const x = evt.nativeEvent.locationX; const y = evt.nativeEvent.locationY; this.parseToDeg (x, y);}}, onPanResponderMove: (evt, gestureState) = > {if (this.props.enTouch) {let x = evt.nativeEvent.locationX; let y = evt.nativeEvent.locationY; if (Platform.OS = = 'android') {x = evt.nativeEvent.locationX + gestureState.dx Y = evt.nativeEvent.locationY + gestureState.dy;} this.parseToDeg (x, y);}, onPanResponderTerminationRequest: () = > true, onPanResponderRelease: () = > {if (this.props.enTouch) this.props.complete (this.state.temp);}, / / another component has become a new responder, so the current gesture will be canceled. OnPanResponderTerminate: () = > {}, / / returns a Boolean value that determines whether the current component should prevent the native component from becoming a JS responder / / returns true by default. Currently, only android is supported. OnShouldBlockNativeResponder: () = > true,});} / / just look at the quadrant and know that the calculation angle parseToDeg (x, y) {const cx = this.props.width / 2; const cy = this.props.height / 2; let deg; let temp; if (x > = cx & & y = cx & & y > = cy) {deg = Math.atan ((cy-y) / (cx-x)) * 180 / Math.PI Temp = (deg-this.props.angle / 2) / (this.props.max-this.props.angle) * (this.props.max-this.props.min) + this.props.min;} else if (x {}, complete: () = > {}, renderCenterView: () = > {}, step: 1, enTouch: true,}; constructor (props) {super (props); this.state = {temp: this.props.value,}; this.iniPanResponder () } iniPanResponder () {this.parseToDeg = this.parseToDeg.bind (this); this._panResponder = PanResponder.create ({/ / request responder: onStartShouldSetPanResponder: () = > true, onStartShouldSetPanResponderCapture: () = > true, onMoveShouldSetPanResponder: () = > true, onMoveShouldSetPanResponderCapture: () = > true, onPanResponderGrant: evt = > {/ / start gesture operation. Give users some visual feedback to let them know what's going on! If (this.props.enTouch) {this.lastTemper = this.state.temp; const x = evt.nativeEvent.locationX; const y = evt.nativeEvent.locationY; this.parseToDeg (x, y);}}, onPanResponderMove: (evt, gestureState) = > {if (this.props.enTouch) {let x = evt.nativeEvent.locationX; let y = evt.nativeEvent.locationY; if (Platform.OS = = 'android') {x = evt.nativeEvent.locationX + gestureState.dx Y = evt.nativeEvent.locationY + gestureState.dy;} this.parseToDeg (x, y);}, onPanResponderTerminationRequest: () = > true, onPanResponderRelease: () = > {if (this.props.enTouch) this.props.complete (this.state.temp);}, / / another component has become a new responder, so the current gesture will be canceled. OnPanResponderTerminate: () = > {}, / / returns a Boolean value that determines whether the current component should prevent the native component from becoming a JS responder / / returns true by default. Currently, only android is supported. OnShouldBlockNativeResponder: () = > true,});} componentWillReceiveProps (nextProps) {if (nextProps.value! = this.state.temp) {this.state = {temp: nextProps.value,};}} parseToDeg (x, y) {const cx = this.props.width / 2; const cy = this.props.height / 2; let deg; let temp If (x > = cx & & y = cx & & y > = cy) {deg = Math.atan ((cy-y) / (cx-x)) * 180 / Math.PI; temp = (270 + deg-this.props.angle / 2) / (360-this.props.angle) * (this.props.max-this.props.min) + this.props.min;} else if (x 100) {rate = 100;} return rate } _ renderCircleSvg () {const cx = this.props.width / 2; const cy = this.props.height / 2; const prad = this.props.angle / 2 * (Math.PI / 180); const startX =-(Math.sin (prad) * this.props.r) + cx; const startY = cy + Math.cos (prad) * this.props.r; / outermost arc configuration const endX = Math.sin (prad) * this.props.r + cx Const endY = cy + Math.cos (prad) * this.props.r; / / calculation progress point const progress = parseInt (this._circlerate () * (360-this.props.angle) / 100,10); / / hard high school math forgotten according to the quadrant, refer to the auxiliary line const t = progress + this.props.angle / 2; const progressX = cx-Math.sin (t * (Math.PI / 180)) * this.props.r Const progressY = cy + Math.cos (t * (Math.PI / 180)) * this.props.r; const descriptions = ['this.props.r; const descriptions, startX, startY,' Aids, this.props.r, this.props.r, 0,1,1, endX, endY,] .join ('') Const progressdescription = ['this.props.r, startX, startY,' Aids, this.props.r, this.props.r, 0, t > = 180 + this.props.angle / 2? 1: 0,1, progressX, progressY,] .join ('); return ();} const styles = StyleSheet.create ({svg: {},})

External call

{}} valueChange= {temp = > {}} renderCenterView= {temp = > ()} enTouch= {true} / > the above is about "how to use react native to achieve arc drag progress bar". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.