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

您可以有条件地在名为Icon的{{1}}组件上具有className，并具有基于className的CSS规则。

在rotated函数中，可以将toggleExpanded设置为组件状态。

rotated

在CSS文件中，使用

toggleExpanded() {
  ... (whatever else happens in here)
  this.setState({iconRotated: !this.state.iconRotated})
}

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

如果您不使用任何CSS文件，则必须有条件地使用内联样式。

.iconRotated
  transform: rotate(90deg);

Answer 2

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

<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>

单击TouchableOpacity onPress时旋转图标

2 个答案: