当用户在动画React / React Native中按住按钮时，如何缩放按钮的大小？

在动画React / React Native中，要实现按住按钮时缩放按钮的大小，可以通过以下步骤实现：

首先，需要在React / React Native组件中引入动画相关的库，例如Animated。
在组件的状态中定义一个动画值，例如scaleValue，并初始化为1。
在按钮的onPressIn事件中，使用Animated.timing方法创建一个动画，将scaleValue从1缩放到较小的值，例如0.8。设置动画的持续时间和缓动函数。
在按钮的onPressOut事件中，使用Animated.timing方法创建另一个动画，将scaleValue从较小的值缩放回1。
在按钮的样式中，使用transform属性将scaleValue应用于按钮的大小。例如，可以设置style={{ transform: [{ scale: scaleValue }] }}。

以下是一个示例代码：

import React, { useState } from 'react';
import { View, TouchableOpacity, Animated } from 'react-native';

const MyButton = () => {
  const [scaleValue] = useState(new Animated.Value(1));

  const handlePressIn = () => {
    Animated.timing(scaleValue, {
      toValue: 0.8,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.timing(scaleValue, {
      toValue: 1,
      duration: 200,
      useNativeDriver: true,
    }).start();
  };

  return (
    <TouchableOpacity
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
    >
      <Animated.View
        style={{
          transform: [{ scale: scaleValue }],
        }}
      >
        {/* Button content */}
      </Animated.View>
    </TouchableOpacity>
  );
};

export default MyButton;

这样，当用户按住按钮时，按钮的大小会缩小，释放按钮时，按钮会恢复原始大小。你可以根据实际需求调整动画的参数和样式。

腾讯云相关产品和产品介绍链接地址：