React Native中多按钮点击切换高亮颜色的实现问题

嗨，我来帮你搞定这个单选按钮的样式切换问题～你遇到的核心问题是用了一个布尔值状态onClicked，所有按钮都基于这个状态判断样式，自然一点击就全变了。咱们换个思路，用状态存储当前选中的用户类型，就能实现点哪个哪个变橙色，其他保持灰色的效果啦！

具体修改步骤： #

1. 调整状态初始化 #

把原来的onClicked布尔值，改成存储选中类型的变量，初始值设为null（表示一开始没有选中任何按钮）：

constructor(props) {
  super(props);
  this.state = { 
    selectedUserType: null  // 存储当前选中的用户类型
  };
  this.selectionOnPress = this.selectionOnPress.bind(this);
}

2. 更新点击事件方法 #

点击按钮时，把当前按钮对应的类型存到状态里：

selectionOnPress(userType) {
  this.setState({ selectedUserType: userType });
}

3. 给每个按钮单独判断样式 #

在render方法里，给每个按钮单独判断是否是当前选中的类型，从而应用不同的样式：

render() {
  // 封装一个获取按钮样式的函数，选中则橙色，否则灰色
  const getButtonStyle = (type) => ({
    backgroundColor: this.state.selectedUserType === type ? "orange" : "gray",
    // 可以补充通用按钮样式，比如内边距、圆角等
    padding: 8,
    borderRadius: 4,
    marginHorizontal: 4
  });

  return (
    <>
      <Text style={styles.switchButtonsTitle}>Choose Type of User</Text>
      
      <TouchableOpacity onPress={() => this.selectionOnPress("BASIC")}>
        <Text style={getButtonStyle("BASIC")}>
          <Text style={styles.switchButtonsText}>BASIC</Text>
        </Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => this.selectionOnPress("INTERMEDIATE")}>
        <Text style={getButtonStyle("INTERMEDIATE")}>
          <Text style={styles.switchButtonsText}>INTERMEDIATE</Text>
        </Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => this.selectionOnPress("ADVANCED")}>
        <Text style={getButtonStyle("ADVANCED")}>
          <Text style={styles.switchButtonsText}>ADVANCED</Text>
        </Text>
      </TouchableOpacity>
    </>
  );
}

为什么这样可行？ #

咱们的状态selectedUserType每次只会存储一个选中的类型（比如"BASIC"、"INTERMEDIATE"或者"ADVANCED"），每个按钮都会单独判断自己的类型和状态里的是否一致，一致就显示橙色，否则显示灰色。这样不管点哪个按钮，只有它会变橙色，其他自动恢复灰色，完全符合你的需求～

另外小提醒：如果觉得绑定this麻烦，可以用箭头函数定义方法，比如：

selectionOnPress = (userType) => {
  this.setState({ selectedUserType: userType });
}

这样就不用在构造函数里写bind啦！

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