React Native-自定义组件之Slider

一、背景

最近在进行原生模块改造RN的时候需要用到一个定制的可拖动进度条，但发现react-native自带的Slider仅仅是在iOS平台上支持，所以决定自己来定制一个。

二、设计思路

组合基础组件和View和Image，搭配PanResponder进行手势监听即可完成。

三、定制方法，分为如下几步:

1.声明属性

首先确定该组件暴露给使用者的属性，以下代码中定义的很多属性基本能满足大部分的对可拖动进度条的差异化需求。

static propTypes = {
        height: PropTypes.number, // 控件高度
        width: PropTypes.number,  // 控件宽度
        maximumTrackTintColor: PropTypes.string, // 进度条背景颜色
        minimumTrackTintColor: PropTypes.string, // 进度条进度部分颜色
        onChange: PropTypes.func, // 进度值发生改变时的回调
        onAfterChange: PropTypes.func, // 拖动结束时的回调
        defaultValue: PropTypes.number, // 默认的进度值
        min: PropTypes.number.isRequired, // 进度范围最小值
        max: PropTypes.number.isRequired, // 进度范围最大值
        step: PropTypes.number.isRequired, // 步长（进度变化的最小单位）
        disabled: PropTypes.bool, // 是否可以拖动
        thumbSize: PropTypes.number, // 滑块的尺寸
        thumbImage: PropTypes.number, // 滑块的图片
        processHeight: PropTypes.number, // 进度条高度
    };

static defaultProps = {
    height: 60,
    width: ScreenWidth,
    onChange: () => {},
    onAfterChange: () => {},
    defaultValue: 0,
    disabled: false,
    thumbSize: 30,
    thumbImage: null,
    maximumTrackTintColor: '#dcdbdb',
    minimumTrackTintColor: '#577BFF',
    processHeight: 7,
  };

2.编写进度条

以下是render方法，state中的process将决定进度条