状态会发生变化，但样式不会发生变化

Question

我正在尝试根据布尔值来使on off按钮更改颜色和文本，但是单击该按钮时不会更改文本和颜色。

我在此处添加了一个console.log来检查布尔值的状态，该状态确实显示了单击时布尔值在true和false之间的变化

  handleClick1 = async () => {
      await this.setState({
        active: !this.state.active,
      });
      this.setState({
        activeNum: [this.state.active, this.state.active].filter(Boolean)
          .length,
      });
      console.log(this.state.active)
  };

但是它没有在这里反映出来，并且边框仍然保持红色，因为它看起来像是假的

                 <TouchableOpacity onPress={this.handleClick1}>
                    <View
                      style={[
                        styles.neon,
                        {borderColor: this.state.active ? 'blue' : 'red'},
                      ]}>
                      <Text
                        style={[
                          styles.switch,

                          {color: this.state.active ? 'blue' : 'red'},
                        ]}>
                        {this.state.active ? 'On' : 'Off'}
                      </Text>
                    </View>
                  </TouchableOpacity>

这是完整的代码

请注意，代码的动画部分不是我自己做的，而是在线搜索的，我将其用作模板，因为我需要在app.js上添加添加和删除按钮，而此代码只是一个组件

我也是新来的本地人，所以我希望任何人都可以用简单的方式解释为什么这不起作用

  import React, {Component} from 'react';
  import {
    AppRegistry,
    Alert,
    View,
    ImageBackground,
    StyleSheet,
    Platform,
    Text,
    Button,
    TouchableHighlight,
    TouchableOpacity,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    Image,Animated, Dimensions,  UIManager,
  } from 'react-native';

  import {Icon, colors} from 'react-native-elements';

  const width = Dimensions.get('window').width;

  export default class Alarm extends Component {

    constructor() {
      super();
      this.state = {
        active: false,
      }

      this.animatedValue = new Animated.Value(0);


      if (Platform.OS === 'android') {
        UIManager.setLayoutAnimationEnabledExperimental(true);
      }
    }



    handleClick1 = async () => {
      await this.setState({
        active: !this.state.active,
      });
      this.setState({
        activeNum: [this.state.active, this.state.active].filter(Boolean)
          .length,
      });
      console.log(this.state.active)
  };

    shouldComponentUpdate(nextProps, nextState) {
      if (nextProps.item.id !== this.props.item.id) {
        return true;
      }
      return false;
    }



    componentDidMount() {
      Animated.timing(
        this.animatedValue,
        {
          toValue: 0.5,
          duration: 500,
          useNativeDriver: true
        }
      ).start(() => {
        this.props.afterAnimationComplete();
      });
    }

    removeItem = () => {
      Animated.timing(
        this.animatedValue,
        {
          toValue: 1,
          duration: 500,
          useNativeDriver: true
        }
      ).start(() => {
        this.props.removeItem(this.props.item.id);
      });
    }

    render() {



      const translateAnimation = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [-width, 0, width]
      });

      const opacityAnimation = this.animatedValue.interpolate({
        inputRange: [0, 0.5, 1],
        outputRange: [0, 1, 0]
      });

      return (
        <Animated.View style={[
          styles.viewHolder, {
            transform: [{ translateX: translateAnimation }],
            opacity: opacityAnimation
          }]}
        >
          <View style={styles.details}>
              <View style={styles.box}>
                <TouchableOpacity style={styles.change} onPress={this.change}>
                  <View style={styles.split}>
                    <Text style={styles.timetext}>Waking</Text>
                    <Text style={styles.timenum}>{this.props.wake}</Text>
                  </View>
                  <View style={styles.split}>
                    <Text style={styles.timetext}>Sleeping</Text>
                    <Text style={styles.timenum}>{this.props.sleep}</Text>
                  </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={this.handleClick1}>
                  <View
                    style={[
                      styles.neon,
                      {borderColor: this.state.active ? 'blue' : 'red'},
                    ]}>
                    <Text
                      style={[
                        styles.switch,

                        {color: this.state.active ? 'blue' : 'red'},
                      ]}>
                      {this.state.active ? 'On' : 'Off'}
                    </Text>
                  </View>
                </TouchableOpacity>
                <TouchableOpacity style = {styles.remove}>
                  <View style={{flexDirection:'row'}}>
                  <Text onPress={this.removeItem} style = {styles.removebutton}>Remove  </Text>
                  <Icon style={{flex:1}} name="minus" type="font-awesome" color="white" size={25} />
                  </View>
                </TouchableOpacity>
              </View>
            </View>
        </Animated.View>
      );
    }
  }

  const styles = StyleSheet.create(
    {


      change: {
        flex: 2,
        flexDirection: 'row',
      },

      remove:{
        position: 'absolute',
        bottom :0,
      },

      removebutton:{
        fontSize: 20,
        color: 'white',
        flex:1,
      },

      box: {
        flexDirection: 'row',
        justifyContent: 'center',
        color: 'white',
        width: 390,
        height: 100,
        backgroundColor: 'rgba(128,128,128,0.5)',
        textAlign: 'center',
        margin: 10,
        borderRadius: 20,
      },

      details: {
        flex: 2,
        flexDirection: 'row',
        margin: 2,
      },

      split: {
        flexDirection: 'column',
        flex: 1,
      },

      timetext: {
        textAlign: 'center',
        color: 'white',
        fontSize: 15,
        fontFamily: 'Montserrat-Regular',
        marginTop: 10,
      },

      timenum: {
        textAlign: 'center',
        color: 'white',
        fontSize: 30,
        fontFamily: 'Montserrat-Regular',
      },

      neon: {
        marginTop: 30,
        marginRight: 10,
        borderRightWidth: 5,
      },

      switch: {
        marginRight: 10,
        fontSize: 20,
      },
    });