javascript - 单击 TouchableOpacity onPress 时旋转图标

Question

单击 TouchableOpacity 时，旋转 FontAwesome 图标时我遇到了最困难的时间。我想让 FontAwesome pro 图标在被单击时指向下方，并在再次单击时返回到其原始状态。

<TouchableOpacity onPress={this.toggleExpanded}>
  <View style={{ alignItems: "center" }}>
    <Icon iconStyle={{paddingTop:"13%", paddingRight: 50}} name="play-circle" color="#637182" type="light" size={30} />
  </View>
</TouchableOpacity>

Answer 1

我是这样实现的。希望对某人有所帮助!

<TouchableOpacity onPress={this.toggleExpanded}>
  <View style={{ alignItems: "center" }}>
    <Icon
      iconStyle={{
        paddingTop:"13%",
        paddingRight: 50,
        transform: [{ rotate: condition-to-rotate-the-icon ? '90deg' : '-90deg' }] // added this
      }}
      name="play-circle"
      color="#637182"
      type="light"
      size={30} />
  </View>
</TouchableOpacity>