Android 在react native中设置图像动画

我对react native完全是新手，我正在尝试制作一个动画，任何建议都会有帮助

import React, { Component } from 'react';
import { Animated, Easing } from 'react-native';
import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro';

class AnimateIcon extends Component {
  spinValue = new Animated.Value(0);

  componentDidMount() {
    this.spin();
  }

  spin = () => {
    this.spinValue.setValue(0);

    Animated.timing(this.spinValue, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => this.spin());
  };

  render() {
    const { style, children } = this.props;
    const rotate = this.spinValue.interpolate({
      inputRange: [0, 1],
      outputRange: ['0deg', '360deg'],
    });

    return (
      <Animated.View style={{ transform: [{ rotate }] }}>
        <FontAwesome5Pro style={style}>{children}</FontAwesome5Pro>
      </Animated.View>
    );
  }
}

export default AnimateIcon;

import React，{Component}来自'React'；
从“react native”导入{Animated，Easing}；
从“react native vector icons/FontAwesome5Pro”导入FontAwesome5Pro；
类AnimateIcon扩展组件{
spinValue=新的动画值（0）；
componentDidMount（）{
这个.spin（）；
}
自旋=（）=>{
此.spinValue.setValue（0）；
已设置动画。计时（此.spinValue{
toValue:1，
持续时间：1000，
放松：放松，线性，
useNativeDriver：没错，
}).start（（）=>this.spin（））；
};
render（）{
const{style，children}=this.props；
常量旋转=this.spinValue.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'360deg']，
});
返回(
{儿童}
);
}
}
导出默认动画图标；

我得到了以下错误：

---

类型“Readonly&Readonly”上不存在属性“style”

因为您使用的是TypeScript，所以需要定义

道具，特别是
道具.style
。
您还需要记住将
动画.Value
保持在
状态
，因为React使用对
状态的更改来确定何时重新渲染

import React, { Component } from 'react'
import { Animated, Easing, ViewStyle } from 'react-native'
import FontAwesome5Pro from 'react-native-vector-icons/FontAwesome5Pro'

interface AnimateIconProps {
    style?: ViewStyle
}

class AnimateIcon extends Component<AnimateIconProps, { spinValue?: Animated.Value }> {
    constructor (props: AnimateIconProps) {
        super(props)
        this.state = {
            spinValue: new Animated.Value(0),
        }
    }

    componentDidMount () {
        this.spin()
    }

    spin = () => {
        this.state.spinValue.setValue(0)
        Animated.timing(this.state.spinValue, {
            toValue: 1,
            duration: 1000,
            easing: Easing.linear,
            useNativeDriver: true,
        }).start(() => this.spin())
    }

    render () {
        const { style, children } = this.props
        const rotate = this.state.spinValue.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', '360deg'],
        })

        return (
            <Animated.View style={{ transform: [{ rotate }] }}>
                <FontAwesome5Pro style={style}>{children}</FontAwesome5Pro>
            </Animated.View>
        )
    }
}

export default AnimateIcon

import React，{Component}来自“React”
从“react native”导入{Animated，Easing，ViewStyle}
从“反应本机矢量图标/FontAwesome5Pro”导入FontAwesome5Pro
界面动画道具{
样式？：视图样式
}
类AnimateIcon扩展组件{
构造器（道具：animateConProps）{
超级（道具）
此.state={
spinValue：新的动画值（0），
}
}
组件安装（）{
this.spin（）
}
自旋=（）=>{
this.state.spinValue.setValue（0）
动画。计时（this.state.spinValue{
toValue:1，
持续时间：1000，
放松：放松，线性，
useNativeDriver：没错，
}).start（（）=>this.spin（））
}
渲染（）{
const{style，children}=this.props
常量旋转=this.state.spinValue.interpolate({
输入范围：[0，1]，
输出范围：['0deg'，'360deg']，
})
返回(
{儿童}
)
}
}
导出默认动画图标
我假设您正在使用TypeScript？是的，我正在使用TypeScript。