【问题标题】: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 的新手。但非常感谢您的帮助!
      猜你喜欢
      • 2020-11-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-11-22
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多