请教大伙在reactnative中该怎么实现这种曲线组件?

Question

如图，学了react-native两个月，不知道怎么实现，求告诉个思路，谢谢

Answer 1

复杂图像用 canvas 或者 SVG。

Answer 2

捣鼓大半天确实可以使用react-native-svg实现：
关键代码：

import Svg, { Circle, G, Path } from 'react-native-svg';
export default class TimingSeclect extends Component {
render() {
    return (
      <View style={styles.container}>
        <Svg style={styles.svg}>
          {/* stroke-linecap */}
          <Path
            id={'lineAB'}
            d={'M 5 40 q 45 60 85 0 t 100 20'}
            stroke={this.state.color}
            strokeWidth={'6'}
            fill={'none'}
            strokeLinecap={'round'}
          ></Path>
          <G>
            <Circle cx="45" cy="70" r="7" 
             fill="#3662c3"
             stroke="#fff" strokeWidth="1" 
             onPress={()=>{this.setState({color:'#3662c3'})}}>
            </Circle>
          </G>
        </Svg>
      </View>
    );
  }
}

比较麻烦的是要手动编写path的d属性，我二元函数全忘了，要精准在轨迹上定位画Circle圈圈好难