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;
  }

  config = {
    changeX: 0,
    changeY: 0,
    xDiff: 0,
    yDiff: 0
  };
  state = {
    max: this.props.max,
    view_width: 0,
    icon_transform: [{ scale: 1 }],
    left: 0,
    top: 0,
    touch_down: false
  };
  render() {
    return (
      <View
        style={{
          height: 80,
          width: "100%",
          backgroundColor: "black",
          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
                });
              });
            }, 1000);
          }}
        >
          <Image
            {...this._panResponder.panHandlers}
            style={{
              height: 20,
              width: 20,
              borderRadius: 10,
              backgroundColor: "yellow",
              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;
  }
  setProgress(progress) {
    if (this.state.touch_down) {
    } else {
      var aa = progress / this.state.max;
      console.warn(
        "progress:" +
          progress +
          "--max:" +
          this.state.max +
          " progress/max:" +
          aa +
          " moveLeft:" +
          (this.state.view_width - 20) * aa
      );

      var aaa = (this.state.view_width - 20) * aa;
      this.setState({
        left: (this.state.view_width - 20) * aa,
        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}
          />


 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 >= 100) {
        alert("100了");
      } else {
        this.setProgressIcon();
      }
      this.seekbar.setProgress(this.state.curprogress);
    }, 1000);
  }

 */