Question

我在我的本机应用程序中有几个按钮，按任何按钮时，颜色都会改变。代码如下所示

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

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.state= {
      clicks: 0,
      show: true,
      isbuttonpress: false
    };
  }

  onButtonState = () => {
      this.setState({isbuttonpress: true});
  } 

  render() {
    return (
      <View style={ [styles.container] }>
        <Text style= { [styles.header] }>How likely is it that you would recommend this company to a friend or colleague?</Text>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>0</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>1</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>2</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>3</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>4</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.buttonContainer, this.state.isbuttonpress?styles.gobackred:styles.goback] } onPress = { () => this.onButtonState() }>
          <Text style = { styles.gobacktext }>5</Text>
        </TouchableHighlight>
        <TouchableHighlight style = { [styles.nextContainer, styles.goback] } onPress = { () => this.onNextButtonState() }>
          <Text style = { styles.gobacktext }>Next</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    fontSize: 20,
    alignItems: 'center',
    padding: 20,
  },
  container: {
    alignItems: 'center', 
    justifyContent: 'center'
  },
    buttonContainer: {
    height:45,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
    width:45,
  }, gobackred: {
    backgroundColor: "#00a2b2",
  },
  goback: {
    backgroundColor: "#00b5ec",
  },
  gobacktext: {
    color: 'white',
  },
  nextContainer: {
    height:45,
    marginTop: 15,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom:20,
    width:250,
    borderRadius:30,
  }
})

布局如下：

无论何时选择任何选项，该按钮的颜色都应该改变。但是在我的代码中，单击任何按钮时所有按钮的颜色都会改变。我该如何解决？

Answer 1

之所以会发生这种情况，是因为您对所有按钮都使用了一种状态Mono来尝试使此代码的组成部分。

您的TouchableHighlight组件

DemoButton.js

this.state.isbuttonpress

App.js

import React, { Component } from "react";
import { View, Text, TouchableHighlight } from "react-native";

export default class DemoButton extends Component {
  constructor(props) {
    super(props);
    this.state = { isbuttonpress: false };
  }
  onButtonState = () => {
    this.setState({ isbuttonpress: !this.state.isbuttonpress });
  };
  render() {
    return (
      <View>
        <TouchableHighlight
          style={{ backgroundColor: this.state.isbuttonpress ? "red" : "blue" }}
          onPress={this.onButtonState}
        >
          <Text>{this.props.buttonTitle}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

在React Native中使用动态样式

1 个答案: