Come rendere un cursore circolare in nativo reattivo

Question

Desidero aggiungere un componente dell'intervallo simile. Ma uno che è in realtà circolare e non ho idea di come farlo. Puoi indicarmi un aiuto per favore.

Te esempio di quello che voglio:

Answer 1

progetto fresco. assicurati di condividere ciò che crei. Penso che anche gli altri troverebbero questo utile. Sfortunatamente, non ho ancora visto molto piacere. Se lo facessi, inizierei osservando come i plugin jQuery lo fanno. Qualcosa come https://github.com/magicismight/react-native-svg potrebbe aiutarti a disegnare le forme. Vorrei poter essere più utile. In bocca al lupo!

Answer 2

Ultimamente ho lavorato con react-native-svg e penso che sia fantastico - SVG e React sono un gioco fatto in geek-heaven, perfetto per creare interfacce utente personalizzate senza bisogno di passare al disegno nativo codice.

Ecco un piccolo componente CircularSlider che implementa quello che hai descritto sopra:

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 

Il codice completo progetto di esempio è in github here.

Questo è solo un prototipo rapido per darvi l'idea, ma ecco come appare (due istanze di CircularSlider, assolutamente posizionati in modo da avere gli stessi centri):