Galvenā problēma ar react native rotate ir tā, ka lielākā daļa ierīču to labi neatbalsta. Tas nozīmē, ka tas var nedarboties pareizi jūsu ierīcē vai vispār nav pieejams.
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:[{rotate:'360deg'}] }} > {this.props.children} </Animated.View> ); } }
Šis kods pēc rindas:
importēt React, { Component } no 'react'; importēt { Animated, Text, View } no 'react-native'; class FadeInView paplašina Component { state = { fadeAnim: new Animated.Value(0), // Sākotnējā necaurredzamības vērtība: 0 } componentDidMount() { Animated.timing( // Animēt laika gaitā this.state.fadeAnim, // animētais vērtība, lai vadītu { toValue: 1, // Animēt līdz necaurredzamībai: 1 (necaurspīdīgs) ilgums: 10000, // Pagaidiet kādu laiku }, ).start(); // Sāk animāciju } render() { let { fadeAnim } = this.state; atgriezties (
Pārveidojas
Ir daži pārveidojumu veidi, ko var veikt programmā React Native. Tie ietver:
Izkārtojuma pārveidojumi: tiek mainīts lietotnes izkārtojums. Piemēram, varat mainīt lietotnes loga augstumu vai platumu.
Animācijas pārveidojumi: tie maina elementa izskatu laika gaitā. Piemēram, varat mainīt elementa necaurredzamību vai pārveidot to citā formā.
Stāvokļa pārvaldības pārveidojumi: šīs izmaiņas, kā lietotne darbojas, kad tā atrodas dažādos stāvokļos, piemēram, kad tā tiek ielādēta vai kad lietotājs ar to mijiedarbojas.
Pagrieziet attēlu, izmantojot animāciju
Programmā React Native varat izmantot komponentu Animācija, lai pagrieztu attēlu.
Pirmkārt, jums ir jāimportē animācijas komponents.
importēt { Animāciju } no 'react-native'
Pēc tam jums ir jāizveido jauna animācijas instance.
let animation = new Animation()
animation.fromRect(0, 0, 100, 100) // Iestata animācijas sākuma punktu. animation.toRect(50, 50, 150, 150) // Iestata animācijas beigu punktu. animation.duration = 1000 // Iestata, cik ilgi animācija ilgs milisekundēs.
