react-native - 在本机反应中为rotateX设置动画时出错
问题描述
我正在尝试在我的反应本机应用程序中按下按钮来旋转图标。但我收到此错误:
更新由 RCTView 管理的视图的属性“转换”时出错
这是图标本身:
<TouchableOpacity
style={[
styles.expandButton,
{transform: [{rotateX: toString(expandIconAngle) + 'deg'}]},
]}
onPress={() => {
rotateIcon();
}}>
<Icon name="expand-less" color="#ffffff" size={28} />
</TouchableOpacity>
这是负责旋转图标的功能:
const expandIconAngle = useRef(new Animated.Value(0)).current;
function rotateIcon() {
Animated.timing(expandIconAngle, {
toValue: 180,
duration: 300,
easing: Easing.linear,
}).start();
}
我哪里错了?
解决方案
使用 interpolate 和 Animated.Image :
import React, { useRef } from "react";
import { Animated, Text, View, StyleSheet, Button, SafeAreaView,Easing,TouchableOpacity } from "react-native";
const App = () => {
// fadeAnim will be used as the value for opacity. Initial Value: 0
const angle = useRef(new Animated.Value(0)).current;
const fadeOut = () => {
// Will change fadeAnim value to 0 in 3 seconds
Animated.timing(
angle,
{
toValue: 1,
duration: 3000,
easing: Easing.linear, // Easing is an additional import from react-native
useNativeDriver: true // To make use of native driver for performance
}
).start()
};
const spin =angle.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
})
return (
<SafeAreaView style={styles.container}>
<Animated.Image
style={{transform: [{rotateX: spin}] }}
source={require('@expo/snack-static/react-native-logo.png')} />
<TouchableOpacity onPress={fadeOut} style={styles.buttonRow}>
<Text>Button</Text>
</TouchableOpacity>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
buttonRow: {
flexBasis: 100,
justifyContent: "space-evenly",
marginVertical: 16
}
});
export default App;
推荐阅读
- python - 如何在 Python 中从多个文件创建矩阵列
- regex - 如何使用正则表达式拆分多分隔字符串以创建配置单元表?
- html - XSLT 显示元素的所有值
- python - 对矩阵行求和,不包括其他数组中的索引
- java - HTTP 状态 500 javax.servlet.ServletException:Servlet [Jersey RESTful App] 的 Servlet.init() 引发异常 java.lang.IllegalArgumentException
- javascript - CSS/JS:使用已知宽度和高度的图像元素模拟背景图像封面
- javascript - 云函数 - 创建新文档时不会触发 onWrite
- jenkins - Jenkins 共享库中的“vars”如何工作?
- c# - C# 硒 | 按钮没有 id
- reactjs - 使用 Clarifai 的 FACE_DETECT_MODEL 时的状态码 400