React Native如何仅修改活跃按钮的背景色与文字样式

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

class App extends Component {
  constructor(props){
    super(props)
    this.state={
      selected: null // 存储当前激活按钮的ID
    }
  }

  // 接收点击按钮的ID作为参数，更新选中状态
  handle = (btnId) => {
    this.setState({ selected: btnId })
  }

  render() {
    return (
      <View style={{padding: 20, marginTop: 50}}>
        {/* 按钮1 */}
        <TouchableOpacity 
          style={[
            styles.Btn, 
            {backgroundColor: this.state.selected === 1 ? "green" : "red"}
          ]} 
          onPress={() => this.handle(1)}
        >
          <Text 
            style={[
              styles.BtnText, 
              {color: this.state.selected === 1 ? "white" : "red"}
            ]}
          >
            Button 1
          </Text>
        </TouchableOpacity>

        {/* 按钮2 */}
        <TouchableOpacity 
          style={[
            styles.Btn, 
            {backgroundColor: this.state.selected === 2 ? "green" : "red"}
          ]} 
          onPress={() => this.handle(2)}
        >
          <Text 
            style={[
              styles.BtnText, 
              {color: this.state.selected === 2 ? "white" : "red"}
            ]}
          >
            Button 2
          </Text>
        </TouchableOpacity>

        {/* 按钮3 */}
        <TouchableOpacity 
          style={[
            styles.Btn, 
            {backgroundColor: this.state.selected === 3 ? "green" : "red"}
          ]} 
          onPress={() => this.handle(3)}
        >
          <Text 
            style={[
              styles.BtnText, 
              {color: this.state.selected === 3 ? "white" : "red"}
            ]}
          >
            Button 3
          </Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  Btn: {
    borderWidth: 1,
    borderColor: '#ccc',
    width: 100,
    borderRadius: 8,
    margin: 5,
    paddingVertical: 10,
    justifyContent: 'center',
    flexDirection: 'row',
    alignItems: 'center',
  },
  BtnText: {
    fontSize: 15,
  },
});

export default App;

• 核心状态管理：selected状态是所有按钮样式的唯一判断依据，存储当前处于激活状态的按钮ID，修改这个状态就能全局更新所有按钮的展示效果，符合React状态驱动UI的设计思想。如果需要默认选中某一个按钮，直接把state中selected的初始值改为对应按钮的ID即可。
• 点击事件传参：每个按钮点击时传入自身的ID，点击后直接更新selected为当前点击的ID，React会自动触发组件重渲染，不需要手动修改单个按钮的样式。
• 动态样式绑定：每个按钮的背景色、文字颜色都通过三元表达式和selected状态做匹配，匹配成功（即当前按钮是激活状态）就用绿色背景+白色文字的激活样式，否则用红色背景+红色文字的默认样式。

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