Question

我是完全陌生的，所以我想对图像进行动画处理，任何建议都会有所帮助！

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;

我收到以下错误：

“类型'Readonly <{}}和Readonly <{子代？：ReactNode;}>'

上不存在属性'style'

Answer 1

由于使用的是TypeScript，因此需要定义props，尤其是props.style。另外，您还需要记住将Animated.Value保留在state中，因为React使用对state的更改来确定何时重新渲染。

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

在React Native中对图像进行动画处理

1 个答案: