Вращать значок при нажатии TouchableOpacity onPress - PullRequest
Новая
       100

Вращать значок при нажатии TouchableOpacity onPress

0 голосов
/ 08 ноября 2018

Мне сложнее всего поворачивать мой значок FontAwesome при нажатии на TouchableOpacity. Я хотел бы, чтобы значок 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>

1 Ответ

0 голосов
/ 08 ноября 2018

Вы можете условно иметь className для компонента Icon с именем rotated и иметь правило CSS, основанное на className.

В вашей функции 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>
...