已解决：反应本机旋转

最后更新： 09/11/2023
作者： JavaScript 源码追踪

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

这段代码一行一行：

import React, { Component } from 'react'; import { Animated, Text, View } from 'react-native'; class FadeInView extends Component { state = { fadeAnim: new Animated.Value(0), // 不透明度的初始值：0 } componentDidMount() { Animated.timing( // 随着时间的推移动画 this.state.fadeAnim, // 动画要驱动的值 { toValue: 1, // 动画到不透明度：1（不透明） duration: 10000, // 让它花点时间 }, ).start(); // 启动动画 } render() { let { fadeAnim } = this.state; 返回 （ {this.props.children} ）； } }

变换

有几种类型的转换可以在 React Native 中执行。 这些包括：

布局转换：这些更改应用程序的布局。 例如，您可以更改应用程序窗口的高度或宽度。

动画变换：这些改变元素随时间移动的方式。 例如，您可以更改元素的不透明度或将其转换为不同的形状。

状态管理转换：这些改变了应用程序在不同状态下的行为方式，例如加载时或与用户交互时。

使用动画旋转图像

在 React Native 中，您可以使用 Animation 组件来旋转图像。

首先，您需要导入 Animation 组件。

从'react-native'导入{动画}

接下来，您需要创建一个新的动画实例。

让动画=新动画（）

animation.fromRect(0, 0, 100, 100) // 设置动画的起点。 animation.toRect(50, 50, 150, 150) // 设置动画的结束点。 animation.duration = 1000 // 设置动画将持续多长时间（以毫秒为单位）。

相关文章：