反応式ネイティブで円形スライダーを作成する方法

Question

同様の範囲のコンポーネントを追加したいと思います。しかし、実際には循環していると私はそれを行う方法がわからない。 助けてくれたら助かりますか？私が何をしたいの

テ例：

Answer 1

クールなプロジェクト。作成したものを必ず共有してください。私は他の人が本当にこれも便利だと思うと思います。残念ながら、私はまだそれほど好きではなかった。しかし、私がこれをやっていたら、jQueryプラグインがどうやってそれを行うのか見ていきます。 https://github.com/magicismight/react-native-svgのようなものは、形を描くのに役立ちます。私がもっと助けてくれることを願っています。がんばろう！

Answer 2

私は最近、反応ネイティブSVGで作業していました。SVGとReactは、Geek-Heavenで行われたマッチです。ネイティブ図面にドロップする必要がなくカスタムUIを作成するのに最適ですコード。

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コンポーネントです。

これはあなたのアイデアを与えるために迅速なプロトタイプはちょうどであるが、ここでは、（彼らは同じ中心を有するので、絶対位置CircularSliderの2つのインスタンス、）どのように見えるかです：保存