Gire icono cuando se hace clic en TouchableOpacity onPress

votos
0

Estoy teniendo el momento más difícil con la rotación de mi Icono FontAwesome cuando se hace clic en el TouchableOpacity. Me gustaría tener el icono pro FontAwesome apuntar hacia abajo cuando su hecho click y volver a su estado original cuando se hace clic de nuevo.

<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>
Publicado el 07/11/2018 a las 22:38
fuente por usuario
En otros idiomas...                            


1 respuestas

votos
0

Puede tener un nombre de clase condicional en el Iconcomponente llamado rotatedy tienen una regla CSS basado en el className.

En su toggleExpandedfunción, se puede establecer rotateden el estado del componente.

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>

En un archivo CSS, utilice

.iconRotated
  transform: rotate(90deg);

Si usted no está usando todos los archivos CSS, usted tiene que utilizar condicionalmente estilo en línea.

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>
Respondida el 07/11/2018 a las 22:53
fuente por usuario

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more