נפתרה: להגיב יליד לסובב

הבעיה העיקרית ב-React Native Rotate היא שהוא אינו נתמך היטב על ידי רוב המכשירים. המשמעות היא שייתכן שהוא לא יפעל כהלכה במכשיר שלך, או שלא יהיה זמין כלל.

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

הקוד הזה שורה אחר שורה:

ייבוא ​​React, { Component } מתוך 'react'; ייבא { Animated, Text, View } מ'react-native'; class FadeInView מרחיב את Component { state = { fadeAnim: new Animated.Value(0), // ערך התחלתי עבור אטימות: 0 } componentDidMount() { Animated.timing( // הנפשה לאורך זמן this.state.fadeAnim, // האנימציה value to drive { toValue: 1, // הנפשה לאטימות: 1 (אטום) משך: 10000, // תן לזה לקחת קצת זמן }, ).start(); // מתחיל את האנימציה } render() { let { fadeAnim } = this.state; לחזור ( {this.props.children} ); } }

הופך

ישנם כמה סוגים של טרנספורמציות שניתן לבצע ב-React Native. אלו כוללים:

שינויי פריסה: אלה משנים את הפריסה של האפליקציה. לדוגמה, אתה יכול לשנות את הגובה או הרוחב של חלון האפליקציה.

טרנספורמציות של אנימציה: אלה משנים את האופן שבו אלמנט נראה זז לאורך זמן. לדוגמה, אתה יכול לשנות את האטימות של אלמנט או להפוך אותו לצורה אחרת.

שינויי ניהול מצבים: אלה משנים את אופן התנהלות האפליקציה כשהיא במצבים שונים, כגון כשהיא נטענת או כשהמשתמש יוצר איתה אינטראקציה.

סובב תמונה באמצעות אנימציה

ב-React Native, אתה יכול להשתמש ברכיב האנימציה כדי לסובב תמונה.

ראשית, עליך לייבא את רכיב האנימציה.

יבוא { אנימציה } מ'react-native'

לאחר מכן, עליך ליצור מופע אנימציה חדש.

תן אנימציה = אנימציה חדשה()

animation.fromRect(0, 0, 100, 100) // מגדיר את נקודת ההתחלה של האנימציה. animation.toRect(50, 50, 150, 150) // מגדיר את נקודת הסיום של האנימציה. animation.duration = 1000 // מגדיר כמה זמן האנימציה תימשך באלפיות שניות.