使用 TouchableHighlight 在 React Native 中按下时如何更改按钮颜色？

Posted 2023-02-23

【中文标题】使用 TouchableHighlight 在 React Native 中按下时如何更改按钮颜色？

【英文标题】：How to change button color when pressed in React Native using TouchableHighlight?

【发布时间】：2017-11-27 10:16:56

【问题描述】：

我目前正在开发一个应用程序，但我无法弄清楚如何在使用 TouchableHighlight 按下按钮后更改颜色。不要与我知道作为 TouchableHighlight 的一部分存在的 underlayColor 道具混淆，它仅在按下按钮时更改颜色，然后返回其常规颜色。

这是我目前所拥有的（为简单起见，省略了部分代码）：

import React,  Component  from 'react';
import 
StyleSheet,
Text,
View,
TouchableHighlight,
Alert,
 from 'react-native';


class MeetingScreen extends Component 
  constructor(props)
       super(props);
       this.state = 
        buttonColor: '#7395AE',
        
this.onButtonPress=this.onButtonPress.bind(this);

  

onButtonPress()
  this.setState( buttonColor: 'red' );


    render() 
  return (
    <View style=styles.container>
      <TouchableHighlight
        style=styles.talk
        color=this.state.buttonColor
        onPress=() => this.state.buttonColor
        selected=this.onButtonPress
      >
        <View>
          <Text style=styles.welcome >
            Talk
          </Text>
        </View>
      </TouchableHighlight>
    </View>
  );

;


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#7395AE',
  ,
  welcome: 
    fontSize: 30,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  ,
  talk:
    height: 200,
    width: 200,
    borderWidth: 5,
    backgroundColor: '#7395AE',
    borderRadius: 100,
    borderColor: '#557A95',
    justifyContent:'center',
    alignItems:'center',
    borderRadius: 100
  ,
);

export default connect(mapStoreToProps, mapDispatchToProps)(MeetingScreen);

我查看了 *** 上的其他答案，并尝试了其中的很大一部分，但我找不到任何适合我的问题的答案。我还查看了 React Native 文档，但没有找到任何有用的信息。现在的代码只显示按钮，当按下它时它会变黑，但在按下后又回到原来的颜色。我正在寻找的是按钮在按下后变为红色并保持红色。任何帮助将不胜感激。非常感谢您提前提供的任何帮助！

【参考方案1】：

<TouchableHighlight
  style=[styles.talk,  backgroundColor: this.state.buttonColor] //Or if don't want "backgroundColor:" and just need change the text color use => "color:""
  onPress=() => this.state.buttonColor
  selected=this.onButtonPress/>

【讨论】：

你是救生员。非常感谢！它工作得很好。我真的很感激！