React Native使用PanResponder实现3个点的Slider

1. 前言

实现这个功能主要会使用RN原生API里的PanResponder。通过使用PanResponder，我们才能实现对整个拖动过程中的：拖动开始、拖动过程中、拖动结束，这3个关键点的重写。

2. 效果展示

3. 使用

import ThreeSlider from './threeSlider';

  /**
   * 开始移动时
   */
  onGrant() {
   
    this.setState({
    isShowSliderText: true });
  }

  /**
   *   拖动结束的回调
   * @param {*} ishow
   */
  onRelease() {
   
    //隐藏
    this.setState({
    isShowSliderText: false });
  }

  /**
   * A  移动时的回调
   */
  onStartMove(start) {
   
    console.log(start);
    this.setState({
    start, sliderText: start });
  }

  /**
   * A点正在移动时Slider不在区域内
   */
  onStartSliderMove(start, slideValue) {
   
    this.setState({
    start, slideValue, sliderText: start });
    this.player.seek(slideValue);
  }

  /**
   * B 移动时的回调
   */
  onEndMove(end) {
   
    this.setState({
    end, sliderText: end });
  }

  /**
   * B点正在移动时Slider不在区域内
   */
  onEndSliderMove(end, slideValue) {
   
    this.setState({
    end, slideValue, sliderText: end });

    this.player.seek(slideValue);
  }

  /**
   * 播放节点 移动时的回调
   */
  onSlideMove(slideValue) {
   
    this.setState({
    slideValue, sliderText: slideValue });
    this.player.seek(slideValue);
  }

  /**
   * threeSlider View
   * @returns
   */
  threeSliderView = () => {
   
    return (
      <View style={
   {
    flex: 1, height: 70 }}>
        <ThreeSlider
          range={
   this.state.duration}
          startA={
   this.state.start}
          endB={
   this.state.end}
          slideValue={
   this.state.slideValue}
          onGrant={
   this.onGrant.bind(this)} //开始移动的回调
          onRelease={
   this.onRelease.bind(this)} // 移动结束时的回调
          onStartMove={
   this.onStartMove.bind(this)} //A点正在移动时的回调
          onStartSliderMove={
   this.onStartSliderMove.bind(this)} //A点正在移动时Slider不在区域内
          onEndMove={
   this.onEndMove.bind(this)} //B点正在移动时的回调
          onEndSliderMove={
   this.onEndSliderMove.bind(this)} //B点正在移动时Slider不在区域内的回调
          onSlideMove={
   this.onSlideMove.bind(this)} //播放正在移动时的回调
        />
      </View>
    );
  };

3. 完整代码

//threeSlider.js

/**
 * 三个点的滑动进度条
 */

// Match参考 https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
import React, {
    Component } from 'react';
import {
    StyleSheet, View, PanResponder, Text, Dimensions }