Question

我只想在单击按钮标签时将按钮的颜色更改为红色。以下是我尝试的代码：这里总共有8个按钮，单击每个按钮我要更改颜色

  import React, { Component } from 'react';
import { Container, Header, Title, Content ,Footer,DatePicker, FooterTab, Button, Left, Right, Body, Icon, Text } from 'native-base';
import { View,StyleSheet,TouchableHighlight } from 'react-native';
import { Col, Row, Grid } from 'react-native-easy-grid';

export default class HomeScreen extends Component {

 onClickListener = (viewId) => {
  if(viewId == 'tag')
  {
    this.props.navigation.navigate('ApplianceTag');
  } else if(viewId == 'openticket') {
    this.props.navigation.navigate('OpenTicket');
  } else if(viewId == 'viewissues') {
    this.props.navigation.navigate('ViewIssues');
  }  else if(viewId == 'infopage') {
    this.props.navigation.navigate('RetrieveInfo');
  }   else if(viewId == 'contactinfo') {
    this.props.navigation.navigate('ContactInfo');
  }    else if(viewId == 'ratings') {
    this.props.navigation.navigate('Ratings');
  }


}
constructor(props) {
  super(props);
  this.state = { pressStatus: false };
}
_onHideUnderlay() {
  this.setState({ pressStatus: false });
}
_onShowUnderlay() {
  this.setState({ pressStatus: true });
}
onPress = () => { 
}

  render() {
    return (


      <Container>
        <Header>
          <Left>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Left>
          <Body>
            <Title>Welcome Suresh</Title>
          </Body>
          <Right />
        </Header>
        <Content>
        <Grid>

        <Col style={{paddingLeft:10}}>


          <Row style= {{paddingTop:10}}>
          <TouchableHighlight 
           onPress={this.onPress}
           activeOpacity={1}
           underlayColor={"red"}
           style={this.state.pressStatus ? styles.buttonPress : styles.button}
           onHideUnderlay={() => this._onHideUnderlay()}
           onShowUnderlay={() => this._onShowUnderlay()}>

            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#82E0AA', borderRadius: 10}}
                onPress={() => this.onClickListener('tag')}>
                <Icon name='pricetag' style={{fontSize: 40, color: 'blue'}} />
                <Text style={{fontSize: 15}}>Tag{'\n'}Inventory</Text>
            </Button>
            </TouchableHighlight>


            </Row>

            <Row style= {{paddingTop:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#F5B7B1', borderRadius: 10}}
                onPress={() => this.onClickListener('openticket')}>
                <Icon name='bug' style={{fontSize: 40, color: 'red'}} />
                <Text style={{fontSize: 15}}>Open{'\n'}Ticket</Text>
            </Button>
          </Row>
          <Row style= {{paddingTop:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#F7DC6F', borderRadius: 10}}>
                <Icon name='hand' style={{fontSize: 40, color: 'green'}} />
                <Text style={{fontSize: 15}}>Request{'\n'}Spares</Text>
            </Button>
          </Row>
          <Row style= {{paddingTop:10, paddingBottom:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#AED6F1', borderRadius: 10}}
                onPress={() => this.onClickListener('ratings')}>
                <Icon name='star' style={{fontSize: 40, color: 'gold'}} />
                <Text style={{fontSize: 15}}>Rate{'\n'}Staff</Text>
            </Button>
          </Row>
        </Col>
        <Col style={{paddingLeft:10}}>
          <Row style= {{paddingTop:10}}>
            <Button iconleft rounded light style={{height:100, width: 160, 
                backgroundColor: '#82E0AA', borderRadius: 10}}>
                <Icon name='checkmark' style={{fontSize: 40, color: 'blue'}} />
                <Text style={{fontSize: 15}}>Update{'\n'}Inventory</Text>
            </Button>
            </Row>
            <Row style= {{paddingTop:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#F5B7B1', borderRadius: 10}}
                onPress={() => this.onClickListener('viewissues')} >
                <Icon name='paper' style={{fontSize: 40, color: '#8E44AD'}} />
                <Text style={{fontSize: 15}}>View{'\n'}Issues</Text>
            </Button>
          </Row>
          <Row style= {{paddingTop:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#F7DC6F', borderRadius: 10}}
                onPress={() => this.onClickListener('infopage')} >
                <Icon name='paper' style={{fontSize: 40, color: 'green'}} />
                <Text style={{fontSize: 15}}>Retrieve{'\n'}Info</Text>
            </Button>
          </Row>
          <Row style= {{paddingTop:10, paddingBottom:10}}>
            <Button iconleft rounded light style={{height: 100, width: 160, 
                backgroundColor: '#AED6F1', borderRadius: 10}}
                onPress={() => this.onClickListener('contactinfo')} >

                <Icon name='call' style={{fontSize: 40, color: 'black'}} />
                <Text style={{fontSize: 15}}>Contact{'\n'}Info</Text>
            </Button>
          </Row>
        </Col>

    </Grid>
        </Content>
        <Footer>
          <FooterTab>
            <Button full>
              <Text style={{textAlign:'center', fontSize: 15}}>VSenze{'\n'}
              <Text style={{fontSize:10}}>All rights reserved to JNARK Research and Development, 2018</Text></Text>
            </Button>
          </FooterTab>
        </Footer>
      </Container>
    );


  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent:"center",
      paddingTop: Constants.statusBarHeight,
      backgroundColor: '#ecf0f1',
      padding: 8,
    },
    welcome: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      color: '#000066',
    },
    welcomePress: {
      fontSize: 20,
      textAlign: 'center',
      margin: 10,
      color: '#ffffff',
    },
    button: {
      borderColor: '#000066',
      borderWidth: 1,
      borderRadius: 10,
    },
    buttonPress: {
      borderColor: 'blue',
      borderWidth: 1,
      borderRadius: 10,
    },
  });
  }}

///请帮助，这是我的初始阶段，之后我将在需要的地方进行此操作。我尝试了几件事但没有用

Answer 1

您可以查看此示例。

https://snack.expo.io/@nazrdogan/moody-almond

import * as React from 'react';
import { Text, View, StyleSheet, TouchableHighlight } from 'react-native';
import { Constants } from 'expo';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { pressStatus: false };
  }
  _onHideUnderlay() {
    this.setState({ pressStatus: false });
  }
  _onShowUnderlay() {
    this.setState({ pressStatus: true });
  }
  onPress = () => { 
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight
          onPress={this.onPress}
          activeOpacity={1}
          underlayColor={"red"}
          style={this.state.pressStatus ? styles.buttonPress : styles.button}
          onHideUnderlay={() => this._onHideUnderlay()}
          onShowUnderlay={() => this._onShowUnderlay()}>
          <Text
            style={
              this.state.pressStatus ? styles.welcomePress : styles.welcome
            }>
            {'Click Me'}
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:"center",
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#000066',
  },
  welcomePress: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: '#ffffff',
  },
  button: {
    borderColor: '#000066',
    borderWidth: 1,
    borderRadius: 10,
  },
  buttonPress: {
    borderColor: 'red',
    borderWidth: 1,
    borderRadius: 10,
  },
});

TouchableHighlight无法正常工作如何修复它

1 个答案: