React Native实现点击切换按钮背景色（白↔蓝）的方法

能否通过StyleSheet实现？ #

不能。StyleSheet创建的样式是静态常量，定义后无法在运行时动态修改属性值，因此没法直接用它实现点击切换背景色的交互需求。

实现方案 #

需要通过状态管理动态控制按钮样式，具体步骤如下：

1. 引入状态钩子，在组件中使用useState记录按钮的激活状态
2. 给TouchableOpacity绑定点击事件，触发状态切换
3. 根据当前状态，动态拼接基础样式和背景色样式

完整代码示例 #

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

export default function ToggleButton() {
  // 初始状态为未激活（白色背景）
  const [isActive, setIsActive] = useState(false);

  return (
    <TouchableOpacity
      // 合并基础样式与动态背景样式
      style={[
        styles.circular,
        isActive ? { backgroundColor: '#55bcf6' } : { backgroundColor: 'white' }
      ]}
      // 点击切换状态
      onPress={() => setIsActive(!isActive)}
    />
  );
}

const styles = StyleSheet.create({
  circular: {
    width: 15,
    height: 15,
    borderColor: '#55bcf6',
    borderRadius: 5,
    borderWidth: 3,
  },
});

优化写法（可选） #

也可以将两种状态的样式提前定义在StyleSheet中，再根据状态切换，提升代码可读性：

const styles = StyleSheet.create({
  circular: {
    width: 15,
    height: 15,
    borderColor: '#55bcf6',
    borderRadius: 5,
    borderWidth: 3,
  },
  circularActive: {
    backgroundColor: '#55bcf6',
  },
  circularInactive: {
    backgroundColor: 'white',
  },
});

// 组件中使用
style={[styles.circular, isActive ? styles.circularActive : styles.circularInactive]}

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