RN实现下拉框箭头指示旋转动画（AnimatedDemo）

import React, { PureComponent } from 'react';
import { StyleSheet, View, Animated, Text } from 'react-native';
import { Entypo } from '@expo/vector-icons';
 
export default class AnimatedDemo extends PureComponent {
  state = {
    spinValue: new Animated.Value(0),
  };
 
  componentDidMount() {
    this.spin = Animated.loop(
      Animated.timing(this.state.spinValue, {
        toValue: 1,
        duration: 2000,
        easing: Animated.Easing.linear,
      })
    ).start();
  }
 
  componentWillUnmount() {
    this.spin.stop();
  }
 
  render() {
    const spin = this.state.spinValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });
 
    return (
      <View style={styles.container}>
        <Animated.View style={{ transform: [{ rotate: spin }] }}>
          <Entypo name="chevron-thin-down" size={24} color="#000" />
        </Animated.View>
        <Text style={styles.text}>下拉刷新</Text>
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    marginLeft: 10,
    fontSize: 16,
    color: '#666',
  },
});

这段代码实现了一个简单的下拉提示箭头旋转动画。组件在挂载后开始无限旋转，在卸载前停止旋转。通过Animated库创建了一个从0度到360度的线性动画，并且使用Interpolation使得旋转的角度可以根据动画的当前进度变化。这个例子展示了如何在React Native中使用Animated API实现简单的动画效果。