用react-native-svg简单实现兼容slider

最新推荐文章于 2021-12-18 14:35:47 发布

bug制造机

最新推荐文章于 2021-12-18 14:35:47 发布

阅读量591

点赞数 1

文章标签： js react native svg

本文链接：https://blog.csdn.net/weixin_42369566/article/details/121384316

版权

emmmm，不多说了，代码贴下面，各位大佬自己参透吧~

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

let runNumber_change = 0;
export default class Slider extends PureComponent {
   
    static defaultProps = {
   
        min: 0, // 最小值
        max: 100, // 最大值
        width: 20,
        color: '#128BFC',
        backgroundColor: '#F5F5F5',
        curColor: '#ffffff'
    }

    constructor(props) {
   
        super(props)

        this._panResponder = PanResponder.create({
   
            // 要求成为响应者：
            onStartShouldSetPanResponder: () => true,
            onPanResponderGrant: this._handlePanResponderGrant,
            onPanResponderMove: this._handlePanResponderMove,
            onPanResponderTerminationRequest: () => true,
            onPanResponderRelease: this._handlePanResponderEnd,
            onPanResponderTerminate: this._handlePanResponderEnd,
        });

        this.state = {
   
            value: props.value || props.min,
            svgWidth: 0
        }
    }

    static getDerivedStateFromProps(nextProps, prevState) {
   
        //该方法内禁止访问this
        if (nextProps.value !== prevState.value) {
   
            //通过对比nextProps和prevState，返回一个用于更新状态的对象
            if (runNumber_change == 0) {
   
                return {
    value: nextProps.value }
            } else {
   
                return prevState
            }
        }