efunbox-mobile-8/pages/components/SeekBar.js

import React, { Component } from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image,
  Button,
  PanResponder,
  findNodeHandle,
  UIManager,
  DeviceEventEmitter
} from "react-native";
import BasePage from "../BasePage";
const instructions = Platform.select({
  ios: "Press Cmd+R to reload,\n" + "Cmd+D or shake for dev menu",
  android:
    "Double tap R on your keyboard to reload,\n" +
    "Shake or press menu button for dev menu"
});

type Props = {};
export default class SeekBar extends BasePage {
  constructor(props) {
    super(props);
    this.pressStatus = false;
    this.progress = 0;
  }

  config = {
    changeX: 0,
    changeY: 0,
    xDiff: 0,
    yDiff: 0
  };
  state = {
    max: 1,
    view_width: 0,
    icon_transform: [{ scale: 1 }],
    left: 0,
    top: 0,
    touch_down: false
  };
  render() {
    return (
      <View
        style={{
          height: 80,
          width: "100%",
          alignItems: "center",
          justifyContent: "center"
        }}
      >
        <View
          //只有红线黄圆重叠处，点红线外圆点外部分无法选中
          style={{
            height: 5,
            width: "90%",
            backgroundColor: "red"
          }}
          ref={c => {
            this.progressBar = c;
          }}
          onLayout={() => {
            const handle = findNodeHandle(this.progressBar);
            setTimeout(() => {
              UIManager.measure(handle, (x, y, width, height, pageX, pageY) => {
                // console.warn(x, y, width, height, pageX, pageY);
                this.setState({
                  view_width: width
                });
                this.setProgress(this.progress);
              });
            }, 0);
          }}
        >
          <Image
            {...this._panResponder.panHandlers}
            style={{
              height: 20,
              width: 20,
              borderRadius: 10,
              backgroundColor: "blue",
              transform: this.state.icon_transform,
              left: this.state.left,
              top: -8
            }}
          />
        </View>
      </View>
    );
  }
  componentWillMount() {
    this._panResponder = PanResponder.create({
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,

      onPanResponderGrant: (evt, gestureState) => {
        this.pressStatus = true;
        this.config.changeY = evt.nativeEvent.pageY;
        this.config.changeX = evt.nativeEvent.pageX;
      },
      onPanResponderStart: (evt, gestureState) => {
        this.pressStatus = true;
        console.log("onPanResponderStart");
        this.setState({
          icon_transform: [{ scale: 1.5 }],
          touch_down: true
        });
      },
      onPanResponderMove: (evt, gestureState) => {
        this.config.yDiff = evt.nativeEvent.pageY - this.config.changeY;
        this.config.xDiff = evt.nativeEvent.pageX - this.config.changeX;
        this.state.left = this.state.left + this.config.xDiff;
        this.state.top = this.state.top + this.config.yDiff;
        this.config.changeY = evt.nativeEvent.pageY;
        this.config.changeX = evt.nativeEvent.pageX;
        if (
          this.state.left < 0 ||
          this.state.left > this.state.view_width - 20
        ) {
          if (this.state.left < 0) {
            this.state.left = 0;
          } else if (this.state.left > this.state.view_width - 20) {
            this.state.left = this.state.view_width - 20;
          }
          this.setState({
            left: this.state.left,
            top: this.state.top
          });
        } else {
          this.setState({
            left: this.state.left,
            top: this.state.top
          });
          console.log("onPanResponderMove:" + this.state.left);
        }
      },
      onPanResponderEnd: (evt, gestureState) => {
        this.pressStatus = true;
        console.log("onPanResponderEnd");
      },
      onPanResponderTerminationRequest: (evt, gestureState) => true,
      onPanResponderRelease: (evt, gestureState) => {
        if (this.pressStatus) {
          this.props.onPress && this.props.onPress();
          this.setState({
            icon_transform: [{ scale: 1 }],
            touch_down: false
          });
        }
        this.pressStatus = false;
        var sss = this.state.left / (this.state.view_width - 20);
        // alert(sss + "%");
        this.props.touchUpCallBack(this.state.max * sss);
      },
      onPanResponderTerminate: (evt, gestureState) => {
        // 另一个组件已经成为了新的响应者，所以当前手势将被取消。
      },
      onShouldBlockNativeResponder: (evt, gestureState) => {
        // 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
        // 默认返回true。目前暂时只支持android。
        //基于业务交互场景，如果这里使用js事件处理，会导致容器不能左右滑动。所以设置成false.
        return false;
      }
    });
  }

  getTouchDown() {
    return this.state.touch_down;
  }
  setMax(setmax) {
    this.setState({
      max: setmax
    });
  }
  setProgress(progress) {
    if (this.state.view_width > 0) {
      this.progress = progress;
      if (this.state.touch_down) {
      } else {
        var left_percentage;
        if (this.state.max == 0) {
          left_percentage = progress / 1;
        } else {
          left_percentage = progress / this.state.max;
        }
        this.setState({
          left: (this.state.view_width - 20) * left_percentage,
          icon_transform: [{ scale: 1 }]
        });
      }
    }
  }
}

const styles = StyleSheet.create({});

/**
         <SeekBar
            ref={view => (this.seekbar = view)}
            max={100}
            //必须带此方法，作为滑动之后抬起的回调
            touchUpCallBack={this.touch_up_callback.bind(this)}
            progress={this.state.curprogress}
          />

  state = {
    curprogress: 0,
    max: 100
  };
 touch_up_callback(progress) {
    //抬起之后，获取算出来的progress
    this.setState({
      curprogress: progress
    });
  }

  setProgressIcon() {
    //轮询设置值，超过max则停止
    setTimeout(() => {
      if (!this.seekbar.getTouchDown()) {
        this.setState({
          curprogress: this.state.curprogress + 1
        });
      }

      if (this.state.curprogress >= this.state.max) {
        alert("100了");
      } else {
        this.setProgressIcon();
      }
      this.seekbar.setProgress(this.state.curprogress);
    }, 1000);
  }

 */