2

单击 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>
4

2 回答 2

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>
于 2020-10-26T14:37:34.290 回答
0

您可以有条件地在Icon被调用的组件上有一个 className，rotated并有一个基于 className 的 CSS 规则。

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

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

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

const rotation = this.state.iconRotated ? 90 : 0
<TouchableOpacity onPress={this.toggleExpanded}>
  <View style={{ alignItems: "center" }}>
  <Icon
    iconStyle={
      {
        paddingTop:"13%",
        paddingRight: 50,
        transform: `${rotate(rotation)}`
      }
    }
    name="play-circle"
    color="#637182"
    type="light"
    size={30}
  />
  </View>
</TouchableOpacity>
于 2018-11-07T22:53:26.237 回答