React Native动画开发问题：scale变换需为数值，无法获取scaleValue变量

一、修复scale值格式错误 #

报错提示Transform的"scale"键对应值必须为数字，当前值为{"scale:0"}，核心问题是你传的scale值格式完全错误：

• 错误写法：transform: [{"scale:0"}] —— 这里把格式错误的字符串当成了transform对象，React Native无法识别。
• 正确写法：transform数组里的每一项是键值对对象，scale对应的值必须是数字或Animated动画变量，比如：

  transform: [{ scale: 0 }]
  

二、解决scaleValue变量无法获取的问题 #

如果用Animated做动画，要注意这几个关键点：

• 必须把scaleValue定义为Animated.Value类型，而非普通变量：

  // 函数组件用useRef保存动画变量
  const scaleValue = useRef(new Animated.Value(1)).current;
  // 类组件则定义为实例属性
  // this.scaleValue = new Animated.Value(1);
  

• 在transform中直接引用这个变量，确保变量名拼写完全正确（大小写、字母都不能错）：

  <Animated.View
    style={{
      transform: [{ scale: scaleValue }]
    }}
  />
  

• 注意：只有Animated.View这类Animated组件才能识别动画变量，普通View不行。

完整可运行示例 #

import React, { useRef, useEffect } from 'react';
import { View, Animated, TouchableOpacity, Text } from 'react-native';

const ScaleAnimationDemo = () => {
  const scaleValue = useRef(new Animated.Value(1)).current;

  const triggerAnimation = () => {
    Animated.sequence([
      Animated.timing(scaleValue, {
        toValue: 1.5,
        duration: 300,
        useNativeDriver: true,
      }),
      Animated.timing(scaleValue, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      })
    ]).start();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          width: 120,
          height: 120,
          backgroundColor: '#2196F3',
          borderRadius: 8,
          transform: [{ scale: scaleValue }],
        }}
      />
      <TouchableOpacity 
        onPress={triggerAnimation} 
        style={{ marginTop: 30, paddingHorizontal: 20, paddingVertical: 10, backgroundColor: '#607D8B', borderRadius: 6 }}
      >
        <Text style={{ color: 'white' }}>触发缩放动画</Text>
      </TouchableOpacity>
    </View>
  );
};

export default ScaleAnimationDemo;

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