Question

我制作了带有react-native-svg和panResponder的圆形滑块。（我在FlatList中使用它）工作正常，但是在移动了2或3个panResponder之后，它便停止工作了。我不知道为什么。

我尝试禁用滚动flatList onMove和启用onRelease。（甚至我都尝试完全禁用滚动条。）

我尝试了onPanResponderTerminationRequest：（）=>否，

我尝试了onPanResponderTerminate：（e，gestureState）=> {...}，但是此func不会触发，似乎panResponder不会终止

这是我的CircularSlider组件。

import React, { Component } from 'react';
import { PanResponder, View } from 'react-native';
import Svg, { Path, Circle, G } from 'react-native-svg';

import styles from './styles';

class CircularSlider extends Component {
  constructor(props) {
    super(props);
    this.handlePanResponderMove = this.handlePanResponderMove.bind(this);
    this.handlePanResponderRelease = this.handlePanResponderRelease.bind(this);
    this.cartesianToPolar = this.cartesianToPolar.bind(this);
    this.polarToCartesian = this.polarToCartesian.bind(this);
    const { width, height } = props;
    const smallestSide = Math.min(width, height);
    this.state = {
      cx: width / 2,
      cy: height / 2,
      r: (smallestSide / 2) * 0.85,
    };
  }

  componentWillMount = () => {
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponderCapture: () => true,
      onStartShouldSetPanResponder: () => true,
      onMoveShouldSetPanResponderCapture: () => true,
      onMoveShouldSetPanResponder: () => true,
      onPanResponderMove: this.handlePanResponderMove,
      onPanResponderRelease: this.handlePanResponderRelease,
    });
  };

  polarToCartesian(angle) {
    const { cx, cy, r } = this.state;

    const a = ((angle - 270) * Math.PI) / 180.0;

    const x = cx + r * Math.cos(a);

    const y = cy + r * Math.sin(a);
    return { x, y };
  }

  cartesianToPolar(x, y) {
    const { cx, cy } = this.state;
    return Math.round(
      Math.atan((y - cy) / (x - cx)) / (Math.PI / 180) + (x > cx ? 270 : 90),
    );
  }

  handlePanResponderMove({ nativeEvent: { locationX, locationY } }) {
    const {
      props: { onValueChange },
    } = this;
    onValueChange(this.cartesianToPolar(locationX, locationY));
  }

  handlePanResponderRelease({ nativeEvent: { locationX, locationY } }) {
    const {
      props: { onChangeFinish },
    } = this;
    onChangeFinish(this.cartesianToPolar(locationX, locationY));
  }

  render() {
    const {
      width, height, value, children, isShow,
    } = this.props;

    const { cx, cy, r } = this.state;

    const startCoord = this.polarToCartesian(0);

    const endCoord = this.polarToCartesian(isNaN(value) ? 0 : value); 
    return (
      <View style={{ ...styles.container, width, height }}>
        {isShow && (
          <Svg onLayout={this.onLayout} width={width} height={height}>
            <Circle
              cx={cx}
              cy={cy}
              r={r}
              stroke="#9E9E9E"
              strokeWidth={3}
              fill="none"
            />
            <Path
              stroke="#758FB5"
              strokeWidth={3}
              fill="none"
              d={`M${startCoord.x} ${startCoord.y} A ${r} ${r} 0 ${
                value > 180 ? 1 : 0
              } 1 ${endCoord.x} ${endCoord.y}`}
            />
            <G
              x={endCoord.x - 7.5}
              y={endCoord.y - 7.5}
              {...this.panResponder.panHandlers}
            >
              <Circle cx={7.5} cy={7.5} r={8} fill="#F2F2F2" />
              <Circle cx={7.5} cy={7.5} r={4} fill="#758FB5" />
            </G>
          </Svg>
        )}
        <View style={styles.innerContainer}>
          <View>{children}</View>
        </View>
      </View>
    );
  }
}

export default CircularSlider;

我正在尝试连续使用panResponder。

有人可以帮助我吗？预先感谢。

两三个动作后，Pan Responder将无法工作

0 个答案: