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

Question

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

这是我到目前为止的内容(为简单起见省略了一些代码):

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);

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

Answer 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}/>