在react native中将类更改为函数并添加额外动画时出现问题

Question

我在尝试将类转换为函数然后添加另一个动画时遇到问题。

它有这个:

this.state = {
rotateValueHolder: new Animated.Value(0)
};

现在，这显然是一个状态，但我如何在函数中设置它呢?是不是像这样:

const rotateValueHolder  = new Animated.Value(0);

事情是它得到更新以后，我不知道如何改变这个:

startImageRotateFunction = () => {
Animated.loop(Animated.timing(this.state.rotateValueHolder, {
opacity: 1,
toValue: 1,
duration: 4000,
easing: Easing.elastic(4),
useNativeDriver: false,
})).start();
};

因为我没有setrotateValueHolder，所以我不能使用这个，可以吗?

Animated.loop(Animated.timing(rotateValueHolder, {

整个代码如下是有任何其他我错过了。我也想添加另一个动画与此运行，我可以做另一个，并在同一或不同的时间，甚至在每一个启动它们?我找到的教程各不相同，很难理解，

对不起，如果这看起来很容易，但我是非常新的反应原生，似乎不能掌握它。

任何帮助或建议都是感激的。由于

import React from 'react';
import {
SafeAreaView,
View,
Animated,
Easing,
TouchableHighlight,
Text,
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
rotateValueHolder: new Animated.Value(0)
};
}
componentDidMount = () => {

}
startImageRotateFunction = () => {
Animated.loop(Animated.timing(this.state.rotateValueHolder, {
opacity: 1,
toValue: 1,
duration: 4000,
easing: Easing.elastic(4),
useNativeDriver: false,
})).start();
};

render(){
return(
<SafeAreaView>
<View>
<Animated.Image
style={{
width: 200,
height: 200,
alignSelf:"center",
transform:
[
{
rotate: this.state.rotateValueHolder.interpolate(
{
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
}
)
}
],
}}
source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',}}
/>
<TouchableHighlight
onPress={() => this.startImageRotateFunction()}>
<Text style={{textAlign:"center"}}>
CLICK HERE
</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
);
}
}

Answer 1

感谢Harrison我让它工作，谢谢，如果其他人有同样的问题，工作代码如下:

import React, { useState, useRef } from "react";
import {   
SafeAreaView,
View,
Animated,
Easing,
TouchableHighlight,
Text,
Image,
StyleSheet,
} from "react-native";
const App = () => {
const rotateValueHolder = useRef(new Animated.Value(0)).current

startImageRotateFunction = () => {
Animated.loop(Animated.timing(rotateValueHolder, {
opacity: 1,
toValue: 1,
duration: 4000,
easing: Easing.elastic(4),
useNativeDriver: false,
})).start();
};  

return(
<SafeAreaView>
<View>
<Animated.Image
style={{
width: 200,
height: 200,
alignSelf:"center",
transform:
[
{
rotate: rotateValueHolder.interpolate(
{
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
}
)
}
],
}}
source={{uri:'https://raw.githubusercontent.com/AboutReact/sampleresource/master/old_logo.png',}}
/>
<TouchableHighlight
onPress={() => startImageRotateFunction()}>
<Text style={{textAlign:"center"}}>
CLICK HERE
</Text>
</TouchableHighlight>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center"
},
fadingContainer: {
padding: 20,
backgroundColor: "powderblue"
},
fadingText: {
fontSize: 28
},
buttonRow: {
flexBasis: 100,
justifyContent: "space-evenly",
marginVertical: 16
}
});
export default App;