ઉકેલી: મૂળ ફેરવો પ્રતિક્રિયા

રીએક્ટ નેટીવ રોટેટની મુખ્ય સમસ્યા એ છે કે તે મોટાભાગના ઉપકરણો દ્વારા સારી રીતે સપોર્ટેડ નથી. આનો અર્થ એ છે કે તે તમારા ઉપકરણ પર યોગ્ય રીતે કામ કરતું નથી અથવા બિલકુલ ઉપલબ્ધ ન પણ હોઈ શકે.

 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> ); } }

આ કોડ લાઇન બાય લાઇન:

'પ્રતિક્રિયા' માંથી પ્રતિક્રિયા, { ઘટક } આયાત કરો; 'રિએક્ટ-નેટિવ' માંથી { એનિમેટેડ, ટેક્સ્ટ, વ્યૂ } આયાત કરો; વર્ગ FadeInView ઘટકને વિસ્તૃત કરે છે { રાજ્ય = { ફેડએનિમ: નવું એનિમેટેડ. મૂલ્ય(0), // અસ્પષ્ટતા માટે પ્રારંભિક મૂલ્ય: 0 } ઘટકDidMount() { Animated.timing( // સમય જતાં એનિમેટ કરો this.state.fadeAnim, // ધ એનિમેટેડ ડ્રાઇવ કરવા માટેનું મૂલ્ય { toValue: 1, // અસ્પષ્ટતા માટે એનિમેટ કરો: 1 (અપારદર્શક) અવધિ: 10000, // તેને થોડો સમય લો }, .start(); // એનિમેશન શરૂ કરે છે } રેન્ડર() { દો { fadeAnim } = this.state; પરત ( {this.props.children} ); } }

પરિવર્તનો

રિએક્ટ નેટિવમાં કેટલાક પ્રકારના રૂપાંતરણો કરી શકાય છે. આમાં શામેલ છે:

લેઆઉટ રૂપાંતરિત થાય છે: આ એપ્લિકેશનના લેઆઉટને બદલે છે. ઉદાહરણ તરીકે, તમે એપ્લિકેશન વિન્ડોની ઊંચાઈ અથવા પહોળાઈ બદલી શકો છો.

એનિમેશન રૂપાંતરિત થાય છે: આ બદલાવ કરે છે કે તત્વ સમય સાથે કેવી રીતે આગળ વધે છે. ઉદાહરણ તરીકે, તમે તત્વની અસ્પષ્ટતાને બદલી શકો છો અથવા તેને અલગ આકારમાં બદલી શકો છો.

સ્ટેટ મેનેજમેન્ટ રૂપાંતરિત થાય છે: જ્યારે એપ્લિકેશન વિવિધ રાજ્યોમાં હોય ત્યારે તે કેવી રીતે વર્તે છે, જેમ કે જ્યારે તે લોડ થઈ રહી હોય અથવા જ્યારે તે વપરાશકર્તા દ્વારા ક્રિયાપ્રતિક્રિયા કરી રહી હોય ત્યારે આ ફેરફારો કરે છે.

એનિમેશનનો ઉપયોગ કરીને છબીને ફેરવો

રીએક્ટ નેટીવમાં, તમે ઈમેજને ફેરવવા માટે એનિમેશન કમ્પોનન્ટનો ઉપયોગ કરી શકો છો.

પ્રથમ, તમારે એનિમેશન ઘટક આયાત કરવાની જરૂર છે.

'રિએક્ટ-નેટિવ' માંથી { એનિમેશન } આયાત કરો

આગળ, તમારે એક નવું એનિમેશન ઇન્સ્ટન્સ બનાવવાની જરૂર છે.

ચાલો એનિમેશન = નવું એનિમેશન()

animation.fromRect(0, 0, 100, 100) // એનિમેશનનો પ્રારંભિક બિંદુ સેટ કરે છે. animation.toRect(50, 50, 150, 150) // એનિમેશનનો અંતિમ બિંદુ સેટ કરે છે. animation.duration = 1000 // મિલિસેકંડમાં એનિમેશન કેટલો સમય ચાલશે તે સેટ કરે છે.