React Native实现rotateX图标旋转动画时更新RCTView的transform属性报错

问题原因 #

存在两个核心错误导致RCTView transform属性更新报错：

• 直接对Animated.Value类型的expandIconAngle调用toString()拼接单位：Animated.Value是React Native动画框架封装的特殊响应式变量，并非普通数值，无法直接转换为字符串拼接角度单位。
• 普通TouchableOpacity组件不支持绑定Animated动态样式：只有被Animated包装的动画组件才能实时响应Animated.Value的数值变化更新视图属性。

修正方案 #

1. 替换普通组件为动画组件：将原有TouchableOpacity替换为Animated.TouchableOpacity（React Native内置Animated已默认封装该组件，直接引入即可使用）。
2. 用插值方法处理单位拼接：通过Animated.Value自带的interpolate方法完成数值到带单位字符串的映射，不要手动拼接单位。

修正后的组件代码如下：

<Animated.TouchableOpacity
  style={[
    styles.expandButton,
    {
      transform: [
        {
          rotateX: expandIconAngle.interpolate({
            inputRange: [0, 180],
            outputRange: ['0deg', '180deg']
          })
        }
      ]
    }
  ]}
  onPress={rotateIcon}
>
  <Icon name="expand-less" color="#ffffff" size={28} />
</Animated.TouchableOpacity>

原有expandIconAngle的定义和rotateIcon函数逻辑无需调整，修改后即可正常触发旋转动画，不会再抛出transform属性更新错误。

内容的提问来源于stack exchange，提问作者Pro