我想添加一个类似范围的组件。但是实际上是圆形的,我不知道该怎么做。请给我一些帮助。
我想要的例子:
我最近一直在使用react-native-svg,我认为这太棒了-SVG和React是geek- heaven的完美结合,非常适合创建自定义UI,而无需下拉至本机绘图代码。
这是一个CircularSlider实现上述内容的小组件:
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 此处。
这只是一个快速的原型,可以为您提供这个想法,但是它的外观是这样的(两个CircularSlider实例,绝对定位,因此它们具有相同的中心):