Javascript 更改React Native中TouchableOpacity的颜色

有人能帮我吗。 这是我的源代码：

想法是，如果我点击“1按钮”，它应该是“红色”，如果我点击“2按钮”也应该将其颜色更改为“红色”，但“1按钮”应该更改为其默认颜色，即黑色。但是，“2按钮”

---

如果我的方法过于简单，那么也欢迎使用其他方法（如

TouchableHighlight

、ES6等）。如果您能向我展示错误，让我从中吸取教训，我将不胜感激。

您可以像这样编写代码：

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

export default class App extends Component {
  state={
    backgroundColor: 'black',
    backgroundColor2: 'black',
    pressed: false,
  };

  changeColor(){
    if(!this.state.pressed){
       this.setState({ pressed: true,backgroundColor: 'red', backgroundColor2: 'black'});
    } else {
      this.setState({ pressed: false, backgroundColor: 'black' ,backgroundColor2: 'red'});
    }
  }
  render() {
    return (
      <View style={styles.container}>
          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor2, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  text:{
    color:'white'
    },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

import React，{Component}来自'React'；
从“react native”导入{平台、样式表、文本、视图、按钮、TouchableOpacity}；
导出默认类应用程序扩展组件{
陈述={
背景颜色：“黑色”，
背景色2:'黑色'，
答:错,，
};
changeColor（）{
如果（！this.state.pressed）{
this.setState（{pressed:true，backgroundColor:'red'，backgroundColor2:'black'}）；
}否则{
this.setState（{pressed:false，backgroundColor:'black'，backgroundColor2:'red'}）；
}
}
render（）{
返回(
this.changeColor（）}
>
1按钮
this.changeColor（）}
>
2个按钮！
);
}
}
const styles=StyleSheet.create({
正文：{
颜色：'白色'
},
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#fff”，
},
});

现在，如果单击第一个按钮，它应该是“红色”，但第二个按钮仍然是“黑色”背景。因此，如果您单击第二个按钮，它应该是“红色”，而第一个按钮应该是“黑色”。

请尝试下面的内容

state={
    selectedButton: '',
};

      <View style={styles.container}>
          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button1' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button1' })}
          >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button2' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button2' })}
          >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>

陈述={
selectedButton:“”，
};
this.setState（{selectedButton:'button1'}）}
>
1按钮
this.setState（{selectedButton:'button2'}）}
>
2个按钮！

根据您的要求，按下第一个按钮，它将调用changeColor。按下第二个按钮，它将调用changeColor2

在代码中，按下第二个按钮，可以将其更改为changeColor2，而不是changeColor函数

这个

而不是

  onPress={()=>this.changeColor()}

---

通过传递id，您可以交替更改颜色

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { colorId:0 };
  }
  onPress = (id) => {
    this.setState({colorId: id});
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={this.state.colorId === 1? styles.red : styles.button}
          onPress={()=>this.onPress(1)}>
          <Text>Button1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.colorId === 2? styles.red : styles.button}
          onPress={()=>this.onPress(2)}>
          <Text>Button2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  red: {
    backgroundColor: 'red',
    alignItems: 'center',
    padding: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
});

import React，{Component}来自'React'；
从“react native”导入{样式表、TouchableOpacity、文本、视图、按钮}；
导出默认类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={colorId:0}；
}
onPress=（id）=>{
this.setState（{colorId:id}）；
};
render（）{
返回(
这个.onPress（1）}>
按钮1
这个.onPress（2）}>
按钮2
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
水平方向：10，
},
红色：{
背景颜色：“红色”，
对齐项目：“居中”，
填充：10，
},
按钮：{
对齐项目：“居中”，
背景颜色：“#DDDDDD”，
填充：10，
},
});

---

您的应用程序中没有按钮/可触摸不透明…请在代码中查看一次谢谢您的提及，我已更新，检查出来你能说明你想要什么吗…你的问题不清楚…请详细说明你想要的情况以便你想要两个按钮的替代按钮颜色改变…如果一个是黑色，另一个是红色，那么点击任何人都会反转按钮的颜色？最初两个都是黑色？我喜欢你的答案，它完全符合要求。自从拉维·夏尔马第一次发布答案以来，我强调他的答案是一个解决方案。谢谢你，用一种简单的方式来做这件事）给我一些新的东西。谢谢你，瓦希德。对你的答案投了赞成票）

  onPress={()=>this.changeColor()}

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

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { colorId:0 };
  }
  onPress = (id) => {
    this.setState({colorId: id});
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={this.state.colorId === 1? styles.red : styles.button}
          onPress={()=>this.onPress(1)}>
          <Text>Button1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.colorId === 2? styles.red : styles.button}
          onPress={()=>this.onPress(2)}>
          <Text>Button2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  red: {
    backgroundColor: 'red',
    alignItems: 'center',
    padding: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
});