react native 如何按下组件使其旋转 180 度？

Question

我有一个 Pressable 组件，里面有一个图标。我想按住它然后旋转180度，我该怎么做？

Answer 1

因此，要做到这一点，您必须使用 react-native 的动画库。在其中制作动画值并制作函数来更新它们。这是您想要的完整示例 (https://snack.expo.dev/@heytony01/grumpy-pretzel)，下面是解释。

先导入库，制作动画值

import { Text, View, StyleSheet,Animated,TouchableWithoutFeedback } from 'react-native';

const spinValue = React.useState(new Animated.Value(0))[0]; // Makes animated value

接下来定义函数来改变值


 // When button is pressed in, make spinValue go through and up to 1
 const onPressIn = () => {
     Animated.spring(spinValue, {
         toValue: 1,
         useNativeDriver: true,
     }).start();
 };

 // When button is pressed out, make spinValue go through and down to 0
 const onPressOut = () => {
     Animated.spring(spinValue, {
         toValue: 0,
         useNativeDriver: true,
     }).start();
 };

棘手的部分是，为了在 react-native 中旋转，您需要传递“0deg”或“12deg”等。

<View style={{
        transform: [
          { rotate: "45deg" },
        ]
      }}>
 </View>

所以你要做的是将动画值插入到“0deg”到“360deg”

// spinDeg will be between '0deg' and '360deg' based on what spinValue is 
const spinDeg = spinValue.interpolate({
      useNativeDriver: true,
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg']
  })

最后你将 spinDeg 传递给你的按钮并完成

 // The animated style for scaling the button within the Animated.View
    const animatedScaleStyle = {
        transform: [{rotate: spinDeg}]
    };

    return (
      <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
          <TouchableWithoutFeedback
             
              onPress={()=>{}}
              onPressIn={onPressIn}
              onPressOut={onPressOut}
          >
          <View style={{justifyContent:"center",alignItems:"center",backgroundColor:"lightgray",padding:15,borderRadius:20}}>
              <Text>PRESS ME</Text>
              <Animated.View style={[styles.iconContainer, animatedScaleStyle]}>
                        <Ionicons name="md-checkmark-circle" size={32} color="green" />
              </Animated.View>
            </View>
        </TouchableWithoutFeedback>
      </View>
    );

react native 如何按下组件使其旋转 180 度？

How to press a component and it rotates 180 degrees in react native?

animation

react-native