React Native点击TouchableOpacity实现按压按钮亮度变化效果

以下是完整可直接运行的代码，无需额外安装第三方依赖，复制替换项目中的App.js即可直接运行，仅实现按压时的亮度变化效果，不含勾选标记。

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

export default function App() {
  // 初始化亮度动画值，默认1为正常显示亮度
  const brightnessVal = useRef(new Animated.Value(1)).current;

  // 手指按下时触发亮度提升动画
  const handlePressIn = () => {
    Animated.timing(brightnessVal, {
      toValue: 1.3, // 按压时亮度为正常的1.3倍，可自行调整数值改变亮度幅度
      duration: 120, // 动画过渡时长，单位ms
      useNativeDriver: true, // 启用原生动画驱动，保证流畅不卡顿
    }).start();
  };

  // 手指抬起/移出按钮范围时恢复正常亮度
  const handlePressOut = () => {
    Animated.timing(brightnessVal, {
      toValue: 1,
      duration: 120,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.pageContainer}>
      <TouchableOpacity
        // 禁用组件默认的透明度变化效果，避免和亮度效果冲突
        activeOpacity={1}
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
        onPress={() => {
          // 这里写你自己的按钮点击业务逻辑
          console.log('按钮被点击');
        }}
      >
        <Animated.View
          style={[
            styles.button,
            {
              // 绑定亮度动画属性
              filter: [{ brightness: brightnessVal }],
            },
          ]}
        >
          <Text style={styles.buttonText}>测试按钮</Text>
        </Animated.View>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  pageContainer: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    backgroundColor: '#2196F3',
    paddingHorizontal: 40,
    paddingVertical: 14,
    borderRadius: 8,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
  },
  buttonText: {
    color: '#ffffff',
    fontSize: 16,
    fontWeight: '500',
  },
});

自定义调整说明 #

• 亮度幅度：修改handlePressIn方法中toValue的数值即可，数值大于1为按压变亮，小于1为按压变暗，推荐调整范围在0.7~1.5之间
• 动画速度：修改两处duration的数值，数值越小动画过渡越快
• 按钮样式：直接修改styles.button中的背景色、圆角、内边距等属性即可适配你的设计需求
• 点击逻辑：在onPress回调中编写你需要执行的按钮点击业务代码即可

内容的提问来源于stack exchange，提问作者정혜주