32 lines
894 B
JavaScript
32 lines
894 B
JavaScript
import React, { useEffect, useRef } from 'react';
|
|
import { Animated, View } from 'react-native';
|
|
import { Icon } from '@ant-design/react-native'
|
|
|
|
const RotatingIcon = () => {
|
|
const spinAnim = useRef(new Animated.Value(0)).current; // 创建一个新的 Animated.Value 实例
|
|
|
|
useEffect(() => {
|
|
Animated.loop(
|
|
Animated.timing(spinAnim, {
|
|
toValue: 1,
|
|
duration: 800,
|
|
useNativeDriver: true, // 这是推荐的做法
|
|
})
|
|
).start();
|
|
}, [spinAnim]);
|
|
|
|
const spin = spinAnim.interpolate({
|
|
inputRange: [0, 1],
|
|
outputRange: ['0deg', '360deg'],
|
|
});
|
|
|
|
return (
|
|
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1 }}>
|
|
<Animated.View style={{ transform: [{ rotate: spin }] }}>
|
|
<Icon name="loading-3-quarters" size={24} color="#999999" />
|
|
</Animated.View>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
export default RotatingIcon; |