如何更改反应本地按钮收集的单击按钮颜色

Question

如何仅从onpress中的反应本地按钮收集中单击按钮颜色。按钮文本也应通过OnPress进行更改。

示例代码

export class App extends Component {
        changeColor() {
            // code here
        }
        render() {
        return (
        <View style={styles.button_view}>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 1
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 2
                </Text>
            </TouchableOpacity>
            <TouchableOpacity onPress={this.changeColor.bind(this)} style={styles.button}>
                <Text style={styles.button_text}>
                    Button 3
                </Text>
            </TouchableOpacity>
        </View>
        )
        }
    }

Answer 1

我尝试过，它起作用了，顺便说一句，它有点漫长；首先为每个人设置一个标志，例如：

constructor(props){
super(props);
  this.state={
    button_1 : false,
    button_2 : false,
    button_3 : false,
    button_4 : false,
  }

然后，对于每个Button，请执行此操作：

 <Button
      title="Button 1"
      color={this.state.button_1 ? "green" : "gray"}
      onPress={() => {
                  this.setState({
                       button_1: !this.state.button_1,
                       button_2: false,
                       button_3: false,
                       button_4: false
                         });
               }}
  />
 <Button
      title="Button 2"
      color={this.state.button_2 ? "green" : "gray"}
      onPress={() => {
                  this.setState({
                       button_1: false,
                       button_2: !this.state.button_2,
                       button_3: false,
                       button_4: false
                         });
               }}
  />

也为文本执行此操作，它将起作用

Answer 2

从您的代码中，看起来所有按钮都具有相同的样式，因此我将创建一个自定义按钮组件并呈现它并传递一个标志，例如Active，并将其设置为TruechangeColor()方法中的父组件。然后，您可以根据主动道具进行样式。即：style = {{color：this.props.active？'红色'：'White';}}