Løst: reagere native rotere

Hovedproblemet med react native rotate er at den ikke støttes godt av de fleste enheter. Dette betyr at den kanskje ikke fungerer som den skal på enheten din, eller at den kanskje ikke er tilgjengelig i det hele tatt.

 animation

import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Component { state = { fadeAnim: new Animated.Value(0), // Initial value for opacity: 0 } componentDidMount() { Animated.timing( // Animate over time this.state.fadeAnim, // The animated value to drive { toValue: 1, // Animate to opacity: 1 (opaque) duration: 10000, // Make it take a while }, ).start(); // Starts the animation } render() { let { fadeAnim } = this.state; return ( <Animated.View // Special animatable View style={{ ...this.props.style, opacity: fadeAnim, transform:&#91;{rotate:'360deg'}&#93; }} > {this.props.children} </Animated.View> ); } }

Denne koden linje for linje:

importere React, { Component } fra 'react'; importer { Animated, Text, View } fra 'react-native'; klasse FadeInView utvider Component { state = { fadeAnim: new Animated.Value(0), // Startverdi for opasitet: 0 } componentDidMount() { Animated.timing( // Animer over tid this.state.fadeAnim, // Den animerte verdi å kjøre { toValue: 1, // Animer til opasitet: 1 (ugjennomsiktig) varighet: 10000, // Få det til å ta en stund }, ).start(); // Starter animasjonen } render() { let { fadeAnim } = this.state; komme tilbake ( {this.props.children} ); } }

Transforms

Det er noen få typer transformasjoner som kan utføres i React Native. Disse inkluderer:

Layouttransformasjoner: Disse endrer oppsettet til appen. Du kan for eksempel endre høyden eller bredden på appvinduet.

Animasjonstransformasjoner: Disse endrer hvordan et element ser ut til å bevege seg over tid. Du kan for eksempel endre et elements opasitet eller transformere det til en annen form.

Tilstandsadministrasjonstransformasjoner: Disse endrer hvordan appen oppfører seg når den er i forskjellige tilstander, for eksempel når den lastes inn eller når den blir interaksjon med av brukeren.

Roter bildet ved hjelp av animasjon

I React Native kan du bruke animasjonskomponenten til å rotere et bilde.

Først må du importere animasjonskomponenten.

importer { Animasjon } fra 'react-native'

Deretter må du opprette en ny animasjonsforekomst.

la animasjon = ny animasjon()

animation.fromRect(0, 0, 100, 100) // Angir startpunktet for animasjonen. animation.toRect(50, 50, 150, 150) // Angir sluttpunktet for animasjonen. animation.duration = 1000 // Angir hvor lenge animasjonen skal vare i millisekunder.