Блог

У меня есть нажимаемый компонент, и внутри него у меня есть значок. Я хочу нажать на него и повернуть на 180 градусов, как я могу это сделать?

Итак, для этого вы должны использовать анимированную библиотеку из 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>
 

Итак, что вы делаете, это интерполируете анимированное значение от «0 градусов» до «360 градусов»

 // 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>
    );