Question

我正在尝试使用PanResponder和Animated在RN应用中绘制（动画）一条线。现在，我可以通过在相关的回调中设置适当的状态来做到这一点，但我想通过Animated.event来做到这一点，但是对于动画IMO使用setState效率不高。我的主要问题是Line标签无法以某种方式获取值，或者我做错了！

import React, {Component} from 'react';
import {PanResponder, StyleSheet, Text, View, Animated} from 'react- 
native';
import Svg, { Line } from 'react-native-svg';
export default class App extends Component {
 constructor(props) {
 super(props)
 this.state = {}
 this.state.x1 = 0
 this.state.y1 = 0
 this.state.position = new Animated.ValueXY({x:100,y:100})
 this.state._panResponder = PanResponder.create({
  // Ask to be the responder:
  onStartShouldSetPanResponder: (evt, gestureState) => true,
  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderGrant: (evt, gestureState) => {
    // this.setState({
    //   x1: evt.nativeEvent.locationX,
    //   y1: evt.nativeEvent.locationY,
    // })
    return Animated.event([{
      nativeEvent:{
        locationX: this.state.x1,
        locationY: this.state.y1
      } 
    }])(evt, gestureState)
  },
  onPanResponderMove: (evt, gestureState) => {
    // this.setState({
    //   position:{x: gestureState.dx, y: gestureState.dy}
    // })

    return Animated.event([null, {
      dx: this.state.position.x,
      dy: this.state.position.y,
    }])(evt, gestureState)

  },
  onPanResponderTerminationRequest: (evt, gestureState) => true,
  onPanResponderRelease: (evt, gestureState) => {      
  },
  onPanResponderTerminate: (evt, gestureState) => {
  },
  onShouldBlockNativeResponder: (evt, gestureState) => {
    return true;
  },
});

 }

 render() {
return (
  <View style={{flex:1}}>
    <View style={styles.container} {...this.state._panResponder.panHandlers}>

      <Svg 
        width={"100%"}
        height={"100%"}
        style={{position:"absolute"}}
      >
        <Line 
          x1={parseInt(this.state.x1)}
          y1={parseInt(this.state.y1)}
          x2={parseInt(this.state.x1 + this.state.position.x)}
          y2={parseInt(this.state.y1 + this.state.position.y)}
          stroke="red"
          strokeWidth="40"
          strokeLinecap="round"
        />
      </Svg>
    </View>
  </View>
);
 }
}

感谢任何帮助！

如何从Animated.event获取PanResponder值？

0 个答案: