reactjs - 如何在 React Native 中制作微调器？我想通过 PanResponder 旋转框

Question

我正在尝试在本机反应中使用 PanResponder 以便在其中心旋转一个框。到目前为止，这是我的代码：

class Spinner extends React.Component {

 pan = new Animated.ValueXY();
 panResponder = PanResponder.create({
   onMoveShouldSetPanResponder: () => true,
   onPanResponderGrant: () => {
    this.pan.setOffset({
      x: this.pan.x._value,
      y: this.pan.y._value
    });
   },
   onPanResponderMove: Animated.event([
    null,
    { dx: this.pan.x, dy: this.pan.y }
   ]),
   onPanResponderRelease: () => {
    this.pan.flattenOffset();
   }

 });


 render() {

  const RotateValue = "10deg"

  return (

    <View style={styles.container}>
      <Animated.View
        style={{
          width:100,
          height:300,
          transform:[{ rotate: RotateValue }]
        }}
        {...this.panResponder.panHandlers}
      >
       <View style={styles.box} />
      </Animated.View>
    </View>

  )
}

}

'''

在这个 const RotateValue 中，我试图使用 this.pan.x 和 this.pan.y 来转换为度数。我放了“10度”来证明它会旋转10度。但是我迷失在如何完成我打算做的事情上。

任何帮助将不胜感激。太感谢了。

Answer 1

我认为你正在寻找的是一种叫做插值的东西。你可以在这里找到更多信息：https ://animationbook.codedaily.io/interpolate/#:~:text=The%20interpolate%20function%20allows%20animated,interpolate%20from%20other%20interpolate%20values.&text=What% 20this%20is%20doing%20is,we%20are%20interpolating%20the%20opacity。

const RotateValue = this.pan.x.interpolate({
    inputRange: [0, 360],
    outputRange: ['0deg', '360deg'],
    extrapolate: 'clamp'
});

我知道这不是最准确或最好的答案，但我希望您会发现这对您有所帮助。