用户点击时更改TouchableHighlight样式

Question

基本上我想要一个按钮，一旦点击/按下该按钮的样式就会改变。

特别是，我发布的图片是我想要实现的风格。我有一个有三行的栏。当用户按下这三行中的一行时，单击的行将在其下方具有白色下划线。

navbar

  import React from 'react';
import { 
  StyleSheet, 
  Text,
  Alert,
  Button, 
  TouchableHighlight,
  View,
  TextInput,
  ScrollView,
  TouchableOpacity,
}from 'react-native';

export default class Main extends React.Component {
  constructor(props){
    super(props)
    this.state= { onPress: false};
  }

  onPress = () => {
    Alert.alert("You have pressed button");
  }

  render() {
    return (
      <View style={styles.container}>

        <View style={styles.header}>
          <Text style={styles.headerText}> Welcome!</Text>
        </View>

        <View style= {styles.headerSecond}>
           <TouchableHighlight

           style= {this.state.onPress? styles.buttonPress : styles.button}
           onPress= {this.onPress}
           underlayColor='transparent'
           >
           <Text style= {styles.headerSecondText}>Troops</Text>
           </TouchableHighlight> 
           <TouchableHighlight
           style= {styles.button}
           onPress= {this.onPress}
           underlayColor='transparent'
           >
           <Text style= {styles.headerSecondText}>Towers</Text>
           </TouchableHighlight>
           <TouchableHighlight
           style= {styles.button}
           onPress= {this.onPress}
           underlayColor='transparent'
           >
           <Text style= {styles.headerSecondText}>Bases</Text>
           </TouchableHighlight>
        </View>

        <View style={styles.headerOption}>
        </View>

        <ScrollView> 
        </ScrollView>
      
      </View>
      
    );
  }


}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  header: {
    backgroundColor: '#80bfff',
    alignItems:  'center',
    justifyContent: 'center',
    padding: 36,
  },
  headerSecond:{
    backgroundColor: '#4da6ff',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  headerSecondText: {
    color: 'white',
    fontSize: 18,
    padding: 14,
  },
  button: {
    alignItems: 'center',
    padding:10,
  },
  buttonPress:{
    alignItems: 'center',
    backgroundColor: 'black',
  },
  headerText:{
      color: 'white',
      fontSize: 22,
      padding: 26,
  },
});