如何实现TouchableOpacity onPress时切换边框颜色？

核心思路是通过状态变量控制边框颜色，点击时切换状态值，从而动态更新样式：

• 用useState定义布尔状态（比如isActive），标记组件是否被点击
• 根据状态值给TouchableOpacity设置不同的borderColor
• 通过onPress事件切换状态

完整代码示例 #

import React, { useState } from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = () => {
  // 初始化状态：未点击状态为false
  const [isActive, setIsActive] = useState(false);

  return (
    <TouchableOpacity
      style={[
        styles.button,
        // 根据状态动态设置边框颜色
        { borderColor: isActive ? '#1677ff' : '#cccccc' }
      ]}
      // 点击时切换状态
      onPress={() => setIsActive(!isActive)}
    >
      <Text style={styles.buttonText}>点击切换边框颜色</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    borderWidth: 2,
    borderRadius: 8,
    paddingVertical: 12,
    paddingHorizontal: 24,
    backgroundColor: '#ffffff'
  },
  buttonText: {
    fontSize: 16,
    textAlign: 'center'
  }
});

export default CustomButton;

代码说明 #

• isActive状态默认为false，对应默认的灰色边框
• 点击组件时，onPress触发setIsActive(!isActive)，翻转状态值
• 样式通过数组合并，基础样式styles.button保持不变，动态样式根据状态切换边框颜色

如果需要区分点击按下和松开的状态（比如按下时一种颜色，松开后恢复），可以改用onPressIn和onPressOut事件：

<TouchableOpacity
  style={[
    styles.button,
    { borderColor: isPressed ? '#1677ff' : '#cccccc' }
  ]}
  onPressIn={() => setIsPressed(true)}
  onPressOut={() => setIsPressed(false)}
>
  <Text style={styles.buttonText}>按下切换边框颜色</Text>
</TouchableOpacity>

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