प्रतिक्रिया-मूल

Question

में एक परिपत्र स्लाइडर कैसे बनाएं I like एक रेंज घटक जोड़ना चाहते हैं। लेकिन वास्तव में एक परिपत्र है और मुझे नहीं पता कि यह कैसे करना है। क्या आप मुझे कुछ मदद के लिए इंगित कर सकते हैं। मैं क्या चाहते हैं की

ते उदाहरण:

Answer 1

शांत परियोजना। जो भी आप बनाते हैं उसे साझा करना सुनिश्चित करें। मुझे लगता है कि दूसरों को वास्तव में यह भी उपयोगी लगेगा। दुर्भाग्य से, मैंने अभी तक ऐसा नहीं देखा है। अगर मैं ऐसा कर रहा था, तो मैं यह देखकर शुरू करूंगा कि jQuery प्लगइन्स इसे कैसे करते हैं। https://github.com/magicismight/react-native-svg जैसे कुछ आपको आकार खींचने में मदद कर सकते हैं। इच्छा है कि मैं और अधिक सहायक हो सकता है। सौभाग्य!

Answer 2

मैं हाल ही में रिएक्ट-नेटिव-एसवीजी के साथ काम कर रहा हूं और मुझे लगता है कि यह शानदार है - एसवीजी और रिएक्ट गीक-स्वर्ग में बने एक मैच हैं, कस्टम यूआई बनाने के लिए बिल्कुल सही है, मूल चित्रण को छोड़ने की आवश्यकता नहीं है कोड।

यह एक छोटा सा CircularSlider घटक है लागू करता है कि आप क्या ऊपर वर्णित:

import React,{Component} from 'react' 
import {PanResponder,View} from 'react-native' 
import Svg,{Path,Circle,G,Text} from 'react-native-svg' 

class CircularSlider extends Component { 
    constructor(props){ 
    super(props) 
    this.handlePanResponderMove = this.handlePanResponderMove.bind(this) 
    this.cartesianToPolar = this.cartesianToPolar.bind(this) 
    this.polarToCartesian = this.polarToCartesian.bind(this) 
    const {width,height} = props 
    const smallestSide = (Math.min(width,height)) 
    this.state = { 
     cx: width/2, 
     cy: height/2, 
     r: (smallestSide/2)*0.85 
    } 
    } 
    componentWillMount =() => { 
    this._panResponder = PanResponder.create({ 
     onStartShouldSetPanResponder:() => true, 
     onMoveShouldSetPanResponder:() => true, 
     onPanResponderMove: this.handlePanResponderMove 
    }) 
    } 
    polarToCartesian(angle){ 
    const {cx,cy,r} = this.state 
     , a = (angle-270) * Math.PI/180.0 
     , x = cx + (r * Math.cos(a)) 
     , y = cy + (r * Math.sin(a)) 
    return {x,y} 
    } 
    cartesianToPolar(x,y){ 
    const {cx,cy} = this.state 
    return Math.round((Math.atan((y-cy)/(x-cx)))/(Math.PI/180)+((x>cx) ? 270 : 90)) 
    } 
    handlePanResponderMove({nativeEvent:{locationX,locationY}}){ 
    this.props.onValueChange(this.cartesianToPolar(locationX,locationY)) 
    } 
    render(){ 
    const {width,height,value,meterColor,textColor,onValueChange} = this.props 
     , {cx,cy,r} = this.state 
     , startCoord = this.polarToCartesian(0) 
     , endCoord = this.polarToCartesian(value) 
    return (
     <Svg onLayout={this.onLayout} width={width} height={height}> 
     <Circle cx={cx} cy={cy} r={r} stroke='#eee' strokeWidth={0.5} fill='none'/> 
     <Path stroke={meterColor} strokeWidth={5} fill='none' 
      d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${value>180?1:0} 1 ${endCoord.x} ${endCoord.y}`}/> 
     <G x={endCoord.x-7.5} y={endCoord.y-7.5}> 
      <Circle cx={7.5} cy={7.5} r={10} fill={meterColor} {...this._panResponder.panHandlers}/> 
      <Text key={value+''} x={7.5} y={1} fontSize={10} fill={textColor} textAnchor="middle">{value+''}</Text> 
     </G> 
     </Svg> 
    ) 
    } 
} 

export default CircularSlider 

पूर्ण नमूना परियोजना कोड GitHub here में है।

यह सिर्फ एक त्वरित प्रोटोटाइप आप विचार देने के लिए है, लेकिन यहाँ यह कैसे (CircularSlider के दो उदाहरणों, बिल्कुल तैनात ताकि वे एक ही केंद्र हैं) दिखाई देता है: