在本机反应中为rotateX设置动画时出错

Question

我正在尝试在我的 react 本机应用程序中按下按钮时旋转图标。 但是我收到了这个错误：

更新由以下人员管理的视图的属性“转换”时出错： RCT视图

这是图标本身：

        <TouchableOpacity
          style={[
            styles.expandButton,
            {transform: [{rotateX: toString(expandIconAngle) + 'deg'}]},
          ]}
          onPress={() => {
            rotateIcon();
          }}>
          <Icon name="expand-less" color="#ffffff" size={28} />
        </TouchableOpacity>

这是负责旋转图标的函数：

 const expandIconAngle = useRef(new Animated.Value(0)).current;
  function rotateIcon() {
    Animated.timing(expandIconAngle, {
      toValue: 180,
      duration: 300,
      easing: Easing.linear,
    }).start();
  }

我哪里错了？

Answer 1

使用 interpolate 和 Animated.Image ：

import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView,Easing,TouchableOpacity } from "react-native";

const App = () => {
  // fadeAnim will be used as the value for opacity. Initial Value: 0
  const angle = useRef(new Animated.Value(0)).current;


  const fadeOut = () => {
    // Will change fadeAnim value to 0 in 3 seconds
  Animated.timing(
      angle,
    {
      toValue: 1,
      duration: 3000,
      easing: Easing.linear, // Easing is an additional import from react-native
      useNativeDriver: true  // To make use of native driver for performance
    }
  ).start()
  };

  const spin =angle.interpolate({
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
})

  return (
    <SafeAreaView style={styles.container}>
     <Animated.Image
  style={{transform: [{rotateX: spin}] }}
  source={require('@expo/snack-static/react-native-logo.png')} />
      
      <TouchableOpacity onPress={fadeOut}  style={styles.buttonRow}>
        <Text>Button</Text>
      </TouchableOpacity>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  buttonRow: {
    flexBasis: 100,
    justifyContent: "space-evenly",
    marginVertical: 16
  }
});

export default App;

实时示例 - https://snack.expo.dev/TP-fQExXT