点击 TouchableOpacity onPress 时旋转图标答案

【问题标题】：Rotate icon when TouchableOpacity onPress is clicked点击 TouchableOpacity onPress 时旋转图标
【发布时间】：2019-04-11 10:39:20
【问题描述】：

当点击 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>

【问题讨论】：

标签： javascript react-native react-native-ios touchableopacity onpress

【解决方案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>

【讨论】：

【解决方案2】：

您可以有条件地在 Icon 组件上拥有一个名为 rotated 的 className，并拥有基于 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>

【讨论】：

我正在使用您的第二个选项，但它似乎不起作用。它遇到旋转变量错误。对不起，我是 RN 的新手。但非常感谢您的帮助！