1.提交seekbar组件

pages/components/SeekBar.js

@@ -0,0 +1,197 @@
+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({});