Inkinga enkulu ngokuphenduka komdabu okusabelayo ukuthi akusekelwe kahle ngamadivaysi amaningi. Lokhu kusho ukuthi ingase ingasebenzi kahle kudivayisi yakho, noma ingase ingatholakali nhlobo.
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> ); } }
Le khodi umugqa ngomugqa:
ngenisa i-React, { Ingxenye } isuka 'ku-react'; ngenisa {Opopayi, Umbhalo, Buka } usuka 'ku-react-native'; isigaba se-FadeInView sinweba Ingxenye { state = { fadeAnim: entsha ye-Animated.Value(0), // Inani lasekuqaleni lokungafihli kahle: 0 } componentDidMount() { Animated.timing( // Animation ngokuhamba kwesikhathi this.state.fadeAnim, // The animated inani lokushayela {toValue: 1, // Dlulisa ku-opacity: 1 (opaque) ubude besikhathi: 10000, // Kwenze kuthathe isikhashana }, ).start(); // Iqala ukugqwayiza } render() { let { fadeAnim } = this.state; buya (
Izinguquko
Kunezinhlobo ezimbalwa zokuguqulwa ezingenziwa kokuthi React Native. Lokhu kubandakanya:
Isakhiwo siyashintsha: Lokhu kushintsha isakhiwo sohlelo lokusebenza. Isibonelo, ungashintsha ubude noma ububanzi bewindi lohlelo lokusebenza.
Ukugqwayiza kuyashintsha: Lokhu kushintsha ukuthi i-elementi ibonakala ihamba kanjani ngokuhamba kwesikhathi. Isibonelo, ungashintsha ukukhanya kwento noma uyiguqule ibe umumo ohlukile.
Ukuphathwa kwezwe kuyashintsha: Lezi zinguquko endleleni uhlelo lokusebenza oluziphatha ngayo uma lukuzifunda ezihlukile, njengalapho lulayisha noma uma lusetshenziswa umsebenzisi.
Zungezisa isithombe usebenzisa i-animation
Nge-React Native, ungasebenzisa ingxenye yokugqwayiza ukuze uzungezise isithombe.
Okokuqala, udinga ukungenisa ingxenye ye-Animation.
ngenisa {Izithombe } zisuka 'ku-react-native'
Okulandelayo, udinga ukudala isenzakalo esisha se-Animation.
vumela ukugqwayiza = i-Animation entsha()
animation.fromRect(0, 0, 100, 100) // Isetha iphoyinti lokuqala lokugqwayiza. animation.toRect(50, 50, 150, 150) // Isetha indawo yokugcina yokugqwayiza. animation.duration = 1000 // Isetha ukuthi ukugqwayiza kuzohlala isikhathi esingakanani ngama-millisecond.
